I have a link that when pressed I want it to do a slideToggle on the next element with the class of ".article_info". I want to do this because there are lot of elements with this class so I only want it to perform this on the next one. I have tried lots of things but can't get this to work, it just does nothing. Here is my code at the moment

 

$('.article_toggle').click(function () {
	$(this).nextAll(".article_info").slideToggle();
return false;

});

 

Also here is an example of my HTML.

 

<div class="article">
   <div class="article_header">
       <h3>Header</h3><p><a class="article_toggle" href="">Toggle</a></p>
   </div>

   <p class="content">Content description</p>

   <div class="article_info">
       <p>Article info line 1</p>
       <p>Article info line 2</p>
       <p>Article info line 3</p>
   </div>
</div>

 

Thanks for any help.

do you have an example of what you want the outcome to be like? like a demo of the jquery module? Seems to me like you're trying to make a accordion, but just want to check first

The first thing to check if nothing happens is if there are any js errors on firebug?

 

I've never used nextAll before, but it maybe because the link is in article_header div. Try removing the header div first and see if that works. Maybe the next element needs to be on the same level i.e. within the same div. I always build jQuery in stages starting with $(".whatever").click(function(){ alert("hello"); } to make sure that every step is working before moving on to the next.

I'm not the best with Jquery

 

I've come up with a way of doing it hope it helps

 

$(document).ready(function(){
 $('.article_toggle').click(function () { 
       $(this).closest('div').next(".article_info").slideToggle(); 
       return false; 

});

});

 

<div class="article"> 
   <div class="article_header"> 
       <h3>Header 1</h3><p><a class="article_toggle" href="">Toggle</a></p> 
	<p class="content">Content description 1</p>
   </div> 



   <div class="article_info"> 
       <p>Article info line 1</p> 
       <p>Article info line 2</p> 
       <p>Article info line 3</p> 
   </div> 

 <div class="article_header"> 
       <h3>Header 2</h3><p><a class="article_toggle" href="">Toggle</a></p> 
	<p class="content">Content description 2</p>
   </div> 

<div class="article_info"> 
       <p>Article info line 1</p> 
       <p>Article info line 2</p> 
       <p>Article info line 3</p> 
   </div> 
</div>