CODEWITHSUNDEEP
jqueryaccordionjquery-ui-accordion
Duncan Morley
Duncan Morley

Reputation: 37

jQuery Accordion Toggle Slide Up & Down

I am trying to create a jQuery accordion area. My markup is as follows:

<ul class="accordion">
    <li>
        <a class="toggle" href="#one">Toogle 1</a>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </li>
    <li>
        <a class="toggle" href="#two">Toogle 2</a>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </li>
</ul>

My jQuery is as follows:

$(document).ready( function() {

        var accordion_head = $('.accordion > li > .toggle'),
            accordion_body = $('.accordion li > div');

        accordion_head.on('click', function(event) {

            event.preventDefault();

            if ($(this).attr('class') != 'active') {
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideDown('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }
        });
});

What I would like it to do is open and close (toggle) each area when clicking on the <a> tag for that area. I don't want other areas closing when another <a> is clicked. I would still like the class of 'active' applied to the <a> when it is open though, and the class removed when closed. Any help with this would be appreciated.

Upvotes: 1

Views: 2443

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337714

Yo, DJ! Just came across this question :)

Hopefully this is still of some help:

var accordion_head = $('.accordion > li > .toggle');

accordion_head.on('click', function (event) {
    var $a = $(this);
    event.preventDefault();

    if ($a.hasClass('active')) {
        $a.removeClass('active').siblings('div').slideUp();
    }
    else {
        $a.addClass('active').siblings('div').slideDown();
    }
});

Example fiddle

Upvotes: 1

Related Questions