Using jQuery "this" plus CSS selector?

Question

I am writing a script to show / hide a section in a div. I have 3 of these sections with hidden sections, but was hoping to use one function to manage all 3.

Here is what I have right now:

$('.rates, .hours, .otherinfo').click(function() { $('.expand').toggle(); }); 

Here's the HTML:

 <div class="rates"> <h2>Rates</h2> <div class="expand"> <p>Text in here is hidden by default.</p> </div> </div> <div class="hours"> <h2>Hours</h2> <div class="expand"> <p>Text in here is hidden by default.</p> </div> </div> <div class="otherinfo"> <h2>Other Info</h2> <div class="expand"> <p>Text in here is hidden by default.</p> </div> </div> 

And CSS:

 .expand { display:none; } 

Obviously, this shows a “expand” div for all 3 sections when you click on any of them. Is there any way to include this in the selector. Something like this'.expand' ?

Thanks!

Answer 1

$(this).find('.expand').toggle()

Answer 2

You should add a script for a better answer. But something like this should work.

 $("#something").click(function(){$(this).children("section").toggle();});