Question

I’m working on trying to wire up a click event (to slideToggle) to a dropdown title that is drawn by Raphael. What I need is when the user clicks on the gray box, content drops down vai a jQuery slideToggle.

Here is an example Rendered Drop Down.

I grab by class

var title = $('.title'); //title div
var title_content = $('.title_content'); //title content div
var holder = $('.holder'); //holder div
var content = $('.content'); //content div

draw and text wrap (works perfectly), but when I get to the part of wiring the click events, I can’t get them to wire correctly. If I’m thinking correctly this would for each holding div create a click event on the title to slide the content out from underneath, or atleast that is what I’m going for.

$(holder).each(function() {
                    $(this).closest('.title').click(function() {
                        $(this).closest('.content').slideToggle('fast');
                    });

                });

Here is the structure of the HTML

<div class="holder">
        <div class="title">
            <div class="title_content" style="display: none;">
                Email Questions:
            </div>
        </div>
        <div class="content" style="display: none;">
            <p class="faqtitle">
                What type of email?</p>
            <div class="faqanswer">
                <p>
                    access the site.</p>
            </div>
            <p class="faqtitle">
                receive the email?</p>
            <div class="faqanswer">
                <p>
                    1 business day.</p>
            </div>
            <p class="faqtitle">
                email?</p>
            <div class="faqanswer">
                <p>
                    one-time email.</p>
            </div>
        </div>
    </div>

also as a side note I get get one click on the titles to open all toggles by using

            title.click(function() {
                content.slideToggle('fast');
            });

——————————————————-

AND THE ANSWER IS

$(title).each(function() {
      $(this).click(function() {
             $(this).next().slideToggle('fast'); 
      });

});

Answer 1

You could Achieve this way

$('.title').click(function(){function(){
   $(this).next().slideToggle('fast');
}});

And Expanding each

$('.title').each(function(){
   $(this).next().slideToggle('fast');
});