Menu
I need a single jQuery function that can be re-used to toggle multiple elements individually. The code example on the jQuery page at http://api.jquery.com/slidetoggle/ works well for a single element using a button but not for multiple elements using non-button elements.
My code (adapted from the jQuery slidetoggle example):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="first">Toggle first</div>
<p class="first">First hidden paragraph.</p>
<div class="second">Toggle second</div>
<p class="second">Second hidden paragraph.</p>
<script>
$( "div.first" ).click(function() {
$( "p.first" ).slideToggle(0);
});
</script>
<script>
$( "div.second" ).click(function() {
$( "p.second" ).slideToggle(0);
});
</script>
</body>
</html>
The code allows each element to be toggled individually which is what I want. However, there are two problems with my code:
It is repetitive and inefficient in that a new script needs to be written for each element that I wish to make toggleable (I would prefer a single function that would toggle any element of a particular class name).
By default, the page is displayed with all elements displaying in full. I would prefer to have the toggleable elements hidden by default.
I have been unable to find a straightforward solution which addresses both issues. Any help would be appreciated.
758
Use same class for all sets with event source. You can use only two classes for n number of html sets quite effectively.
Live Demo
<div class="first">Toggle first</div>
<p class="first-p">First hidden paragraph.</p>
<div class="first">Toggle second</div>
<p class="first-p">Second hidden paragraph.</p>
Use current object with next()
$('.first-p').hide();
$( "div.first" ).click(function() {
$(this).next().slideToggle(1000);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
