Here is the code snippet I'm currently using:
<div>
<ul>
<li class="hide">Code 1</li>
<li class="hide">Code 2</li>
<li class="hide">Code 3</li>
<li class="hide">Code 4</li>
<li class="hide">Code 5</li>
<li class="hide">Code 6</li>
<li class="hide">Code 7</li>
<li class="hide">Code 8</li>
</ul>
</div>
$(document).ready(function() {
$(".hide").click(function(e) {
$(this).toggleClass("hideit");
});
});
ul li.show {
list-style: inside;
padding-left: 15px;
cursor: pointer;
height:16px;
}
ul li.hideit {
list-style: none;
list-style-image: none;
padding-left: 35px;
cursor: pointer;
}
However, I've encountered a problem - when I click on an item, the text shifts to the right and then back to its original position when clicked again.
I am attempting to ensure that when I click on an item, the list-style changes to none without causing any movement in the text.
This issue has been observed across various browsers including IE7+, Opera, Safari, Firefox, and Chrome.
Best regards,