Sections of SlideDown until a div with another class is found

Question

I have a code like this:

<div class="clickme">some text</div> <div class="slide">slide</div> <div class="slide">slide</div> <div class="slide">slide</div> <div class="clickme">some text</div> <div class="slide">slide</div> 

Hidden divs with a class layer are hidden, what I want to do is that if the user presses the div button, only the next three (or any number) divs will slide down to display the contents, the same if the user clicks on the second click with the mouse.

I cannot change html, so I thought jQuery might be my solution.

Answer 1

You need .nextUntil() - DEMO

 $(".clickme").on("click", function() { $(this).nextUntil(".clickme").slideToggle(); })​; 

Answer 2

Use slideToggle and next , for example in this fiddle: http://jsfiddle.net/Cvx9s/

HTML

 <div class="clickme">some text</div> <div class="slide">slide</div> <div class="slide">slide</div> <div class="slide">slide</div> <div class="clickme">some text</div> <div class="slide">slide</div>​ 

Js

 $('.slide').hide(); $('.clickme').click(function(){ var tar = $(this).next(); while(tar.hasClass('slide')){ tar.slideToggle(); tar = tar.next(); } });