CODEWITHSUNDEEP
jqueryhtml
JonathanBristow
JonathanBristow

Reputation: 1065

How to work out what jQuery selectors I need to use?

This is my mark up:

<div id="august2012" class="event_month">
  <div class="header"><span>August 2012</span></div>
  <div id="event3" class="event">
    <h3>Example Event 3 - 19/08/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
  <div id="event4" class="event">
    <h3>Example Event 4 - 24/08/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
</div> 
<div id="july2012" class="event_month">
  <div class="header"><span>July 2012</span></div>
  <div id="event1" class="event">
    <h3>Example Event 1 - 10/07/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
  <div id="event2" class="event">
    <h3>Example Event 2 - 14/07/12</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
</div> 
<div id="june2012" class="event_month">
  <div class="header"><span>June 2012</span></div>
</div>
<div id="may2012" class="event_month">
  <div class="header"><span>May 2012</span></div>
</div>

Now, I need to write some javascript code so that when someone clicks on one of the ".header" classes, the ".event" classes below slide down.

The issue is, how do I write some code that can be used for all the months without me writing more code whenever I add another month.

This is what I have so far, but it doesnt work...

$("#events #event_listings .event_month .header").click(function() { 
    $(this).parent(".event").slideDown('slow');
});

Can anyone help me with this?

Upvotes: 1

Views: 72

Answers (1)

wirey00
wirey00

Reputation: 33661

You want something like this?

$('.header').click(function(){
    $(this).nextUntil('.header').slideToggle();        
});​

http://jsfiddle.net/p8LrG/

Upvotes: 1

Related Questions