Show/Hide div onclick on its specific own anchor - php

Question

I have the following HTML generated by PHP:
<input><label>anchor 139</label>
<div class="slidingDiv 139" style="display: none;">content 139</div>
anchor 140</label>
<div class="slidingDiv 140" style="display: none;">content 140</div>
<input><label>anchor 141</label>
<div class="slidingDiv 141" style="display: none;">content 141</div>
<input><label>anchor 142</label>
<div class="slidingDiv 142" style="display: none;">content 142</div>
As you can see it, the second class of anchor and div is the same for each iteration of the loop. I did like this because I am using a jquery snippet to hide/show div onclick on anchor.
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
The problem of this jquery code: It doesn't take into consideration the second class I am adding (to anchor and div). In fact I want to hide the specific div related to his anchor, not all the divs.
Thank you for your time and help.

Answer 1

Try using .next which seems to do the trick for your markup.
$(this).next('.slidingDiv').slideToggle();
Full Code:
<style>
.slidingDiv { display: none; }
</style>
<script>
$(document).ready(function(){
$('.show_hide').click(function(e){
e.preventDefault(); //to prevent default action of link tag
$(this).parent().next('.slidingDiv').slideToggle();
});
});
</script>
Note: I added display:none style rule to .slidingDiv so that it is hidden when the page is rendering and not after page is rendered.

Answer 2

Try this using next:
$('.show_hide').click(function () {
$(this).next(".slidingDiv").slideToggle();
});
Your code:
$(".slidingDiv").slideToggle();
was sliding all the div with class slidingDiv. But we need to take into consideration the div next to the element being clicked in the current scope only using the next() method.