Toggle Show or Hide Divs through jquery

Toggle is one of the best function in jQuery, here we can update about how to handle html sections by hide or show through this jquery toggle function.

here we go for an easy example,

HTML block

<ul id="list">
<li>
<a href="#" class="togglelink">America</a>
<div class="toggle" style="display: block;">
<p>America - USA - the States</p>
</div>
</li>
</ul>

jQuery Block

$(document).ready(function () {
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide('slow');
elem.toggle('slow');
});
});

That's it. Update your comments. Thanks.

Post a Comment

Post a Comment (0)

Previous Post Next Post