CODEWITHSUNDEEP
jqueryaccordion
Gevorkyan
Gevorkyan

Reputation: 13

Closing Active Accordion panel on click... there seems to be one panel open at all times

http://jsfiddle.net/buhlett/paw5w/

The accordion works smoothly but it doesn't allow me to close all the panels at any one time. One panel is forced open at all times.

I'm pretty sure that I'm missing a line or two

jQuery

$(document).ready(function() {
// Store variables
var accordion_head = $('.grape-accordion > li > a'),
    accordion_body = $('.grape-accordion li > .grape-sub-menu, .grape-last-sub-menu');
// Open the first tab on load
// Click function
accordion_head.on('click', function(event) {
    // Disable header links
    event.preventDefault();
    // Show and hide the tabs on click
    if ($(this).attr('class') != 'active') {
        accordion_body.slideUp('normal');
        $(this).next().stop(true, true).slideToggle('normal');
        accordion_head.removeClass('active');
        $(this).addClass('active');
    }
});
});​

HTML

<div>
    <ul class="grape-accordion">
        <li id="one" class="share"><a href="#one">-</a>
        <ul class="grape-sub-menu">
            <li><a href="#"><em>»</em>-</a></li>
        </ul>
        </li>
        <li id="two" class="mail"><a href="#two">-</a>
        <ul class="grape-sub-menu">
            <li><a href="#"><em>»</em>-</a></li>
        </ul>
        </li>
        <li id="two" class="mail"><a href="#two">-</a>
        <ul class="grape-sub-menu">
            <li><a href="#"><em>»</em>-</a></li>
        </ul>
        </li>
    </ul>
</div>

Upvotes: 1

Views: 1617

Answers (1)

j08691
j08691

Reputation: 207861

Do you mean like this jsFiddle example? If so, all I did was add an else clause.

else {
        accordion_body.slideUp('normal');
        accordion_head.removeClass('active');
    }

Upvotes: 1

Related Questions