Jquery div expands all divs on page
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
开发者_如何学C</script>
How to expand only the div which is linked to the specific link?
Edit: Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>
EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link
elements in different relation to .content
elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div
is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div
is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div
is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div
is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.
For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.
Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;
精彩评论