CODEWITHSUNDEEP
jquery
Dheeraj Agrawal
Dheeraj Agrawal

Reputation: 2357

Slide up other element except current one

I am trying to make a slide toggle query. I have below list, and want the functioning same like Accordion (if I click on a li, that li slides down and other slides up).

$(document).ready(function(){
    $(".da_faq_list li h3").click(function(){
        $(this).parent().find(".da_faq_content").slideToggle("slow");
    });
});

<ul class="da_faq_list">
    <li>
        <h3>Head 1</h3>
        <div class="da_faq_content">
            Content Here
        </div>
    </li>
    <li>
        <h3>Head 1</h3>
        <div class="da_faq_content">
            Content Here
        </div>
    </li>
    <li>
        <h3>Head 1</h3>
        <div class="da_faq_content">
            Content Here
        </div>
    </li>
    <li>
        <h3>Head 1</h3>
        <div class="da_faq_content">
            Content Here
        </div>
    </li>
</ul>

Upvotes: 0

Views: 2930

Answers (1)

rossipedia
rossipedia

Reputation: 59397

In the absence of the accordion plugin, here's a quick way of accomplishing this:

http://jsfiddle.net/bryanjamesross/b8YAa/

The point is to slide up any element that is visible using the :visible selector, and then slide down the content div that is contained in the same LI as the H3 that was clicked.

Upvotes: 2

Related Questions