CODEWITHSUNDEEP
javascriptjqueryhtmlcssselector
Al Nafis
Al Nafis

Reputation: 127

jQuery selector problem: clicking one element will modify the immediate next element

I want to use jquery to slidedown the description classes when title classes are clicked. However, what I want to do is when a specific title is clicked, only the immediate next description should slidedown. How can I do that in one block of code?

$(document).ready(function(){
	$(".title").click(function(){
		$(".description").slideToggle();
	})
})
<div> <h2 class="title">title</h2> 
   <table class="description">description</table> 
</div>

<div> <h2 class="title">title</h2> 
   <table class="description">description</table> 
</div>

<div> <h2 class="title">title</h2> 
   <table class="description">description</table> 
</div>

<div> <h2 class="title">title</h2> 
   <table class="description">description</table> 
</div>

Upvotes: 0

Views: 36

Answers (1)

pavel
pavel

Reputation: 27092

$(".description").slideToggle(); takes all elements with class=description, not just the one you want.

Use next() near the selected one title.

$(document).ready(function(){
    $(".title").click(function(){
        $(this).next(".description").slideToggle();
    })
})

Upvotes: 3

Related Questions