Below is a snippet of my sample code:
SAMPLE HTML CODE:
<ul>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item hidden"> item 1 </li>
<li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>
SAMPLE CSS CODE:
.hidden {
display: none;
}
.visible {
display: block;
}
SAMPLE JS CODE:
$('.button').on('click', function (e) {
var item = $('.item');
item.removeClass('hidden');
});
I am looking to assign the class .visible to elements that previously had the .hidden class. Essentially, I aim to hide these items again when clicked, creating a toggling effect of classes.
How can I hide the last two items?
Appreciate any guidance on this matter!