I'm trying to use JQuery and slideToggle() to slide down a hidden row when it a particular header is clicked. I'm trying to do this with 1 jQuery statement. I know I can create an id for each div tag and have a separate function for each 'header row' that is clicked, but I would really like to NOT have to do this.
In the code example below I can only get the first row to do the slideToggle but I can't figure out how to get the other to slide when the 'header row' is clicked on.
Any help would be much appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(this).click(function(){
$("#Content").slideToggle("slow"); /* Using this only toggles the first set of data */
});
});
</script>
</head>
<body>
<div>
<!-- Row 1 -->
<div id="Label">
1st Header:
</div>
<div id="Content">
Data 1
<br />
Data 2
</div>
<!-- Row 2 -->
<div id="Label">
2nd Header
</div>
<div id="Content">
Data 3
<br />
Data 4
</div>
</div>
</body>
</html>
<div>
<!-- Row 1 -->
<div class="Label">
1st Header:
</div>
<div class="Content">
Data 1
<br />
Data 2
</div>
<!-- Row 2 -->
<div class="Label">
2nd Header
</div>
<div class="Content">
Data 3
<br />
Data 4
</div>
</div>
Javascript
$(document).ready(function()
{
$(".Label").click(function()
{
$(this).next().stop().slideToggle("slow");
});
});