jQuery Accordion选项卡未关闭

Question

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;
}

Answer 1

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.

Answer 2

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/

Answer 3

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.