CODEWITHSUNDEEP
javascriptjqueryhtmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Customise my jQuery accordion

I'd like to change the background colour when I click a link on my Accordion.

I assume this means adding/removing an 'active' class on clicking the element.

Can someone explain how I do this with my code?

Fiddle.

(function($) {
    var allPanels = $('.accordion > dd').hide();
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();
        if ($(this).parent().next().is(":visible")) return false;
        $(this).parent().next().slideDown();
        return false;
    });
    $('.accordion > dt > a').first().trigger('click');
})(jQuery);

Upvotes: 1

Views: 47

Answers (1)

Mivaweb
Mivaweb

Reputation: 5722

I have updated your jsfiddle:

http://jsfiddle.net/2hmzcgqm/6/

JS code:

(function($) {
    var allPanels = $('.accordion > dd').hide();
    var allLinks = $('a.heading');
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();

        //Remove all 
        allLinks.removeClass('active');

        if ($(this).parent().next().is(":visible")) return false;
        $(this).parent().next().slideDown();

        //Add active class
        $(this).addClass('active');

        return false;
    });
    $('.accordion > dt > a').first().trigger('click');
})(jQuery);

CSS code:

.heading {background:red}
.active {background:black}

Upvotes: 1

Related Questions