I am trying to display only 4 out of 8 lists initially, and upon clicking a "more" button, the rest of the list should be revealed. Can someone please assist me with this?
Below is the jQuery code:
$(document).ready(function() {
$("#accordion").hide();
$('#acc').click(function() {
if ($("#accordion").is(":hidden")) {
$("#accordion").slideDown("fast");
}
else { $("#accordion").hide(); }
});
}) ;
And here is the HTML code:
<div>
<h1 style="font-size:12px;" id="acc">Product</h1>
<div id="accordion">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
<li>Link8</li>
</ul>
<span id="more"><a href="#">More</a></span>
</div>
</div>