CODEWITHSUNDEEP
javascriptjqueryhtmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

jQuery Accordion tab doesn't close

Can someone explain why my jQuery Accordion isn't closing?

See the tab that is open on page load. When I try to close, it keeps re-opening. Help?!

http://jsfiddle.net/02vz11f0/

Here's my jQuery:

$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {
        $(this).next().slideToggle('fast', function () {
            var status = $(this).is(':hidden') ? 'open' : 'close';
            $(this).prev('h4').find('.accordion-status').html(status);
        });
    });
});

CSS:

/* Separate component file for Accordion? */

/* line 72, sass/_layout.scss */
 #accordion {
    width: 100%;
}
/* line 73, sass/_layout.scss */
 .accordion-content {
    display: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 50px;
}
/* line 80, sass/_layout.scss */
 .accordion-content.default {
    display: block !important;
}
/* line 82, sass/_layout.scss */
 .accordion-status {
    position: absolute;
    top: 30px;
    right: 30px;
}
/* line 88, sass/_layout.scss */
 .accordion-toggle {
    cursor: pointer;
    position: relative;
    padding: 35px 60px 35px 0;
    margin: 0;
}
/* line 94, sass/_layout.scss */
 .accordion-toggle span {
    margin-left: 60px;
    color: #ffffff;
}

Upvotes: 3

Views: 610

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240938

You need to remove the default class from the element within the .slideToggle() callback.

Updated Example

$('#accordion').find('.accordion-toggle').click(function () {
    $(this).next().slideToggle('fast', function () {
        var status = $(this).is(':hidden') ? 'open' : 'close';
        $(this).removeClass('default').prev('h4').find('.accordion-status').html(status);
    });
});

In your CSS, you had the following:

.accordion-content.default {
    display: block !important;
}

Which was preventing the content from being toggled.

You could also just remove !important, and it will work as expected too. You should avoid using it as much as possible.

Upvotes: 2

redditor
redditor

Reputation: 4276

You need to remove !important from:

.accordion-content.default {
  display: block !important;
}

It is overriding the action of the accordion.

Demo: http://jsfiddle.net/02vz11f0/1/

Upvotes: 1

ttacon
ttacon

Reputation: 503

As I put in the comment, it is the !important rule on your CSS selector .accordion-content.default. It overrides jQuery hiding the div. See this link as to how !important always overrides that property.

Upvotes: 0

Related Questions