kubedan kubedan - 3 months ago 15
jQuery Question

jQuery Accordion UI empty item issue.

I have problem with empty item(s) in accordion UI.

I have 3 sections.

+ Section 1
+ Section 2 (empty)
+ Section 3


html

<div id="accordion">
<h3>Section 1</h3>
<div>content 1</div>
<h3>Section 2 (empty)</h3>
<div></div>
<h3>Section 3</h3>
<div>content 3</div>
</div>


jQuery

$(function() {
$("#accordion").accordion({
autoHeight: false,
active: false,
collapsible: true,
});
});‚Äč


Example: http://jsfiddle.net/ty5ZH/

When I click on
Section 2
an than click on other section, accordion doesn't work.

If I click on
Section 2
an than click on
Section 2
again a than click on other section everythigs works fine.

Is jQuery UI accordion bug?

Answer

If you want to stop the section from even opening, this answer may be the fix you need: http://stackoverflow.com/a/4672074/750593

I created a JS fiddle http://jsfiddle.net/cchana/ty5ZH/2/ of it working. You need to add a class or ID to identify the sections that you don't want to open and then run the following immediately after declaring your accordian.

$('.disable').addClass("ui-state-disabled");
var accordion = $( "#accordion" ).data("accordion");
    accordion._std_clickHandler = accordion._clickHandler;
    accordion._clickHandler = function( event, target ) {
    var clicked = $( event.currentTarget || target );
    if (! clicked.hasClass("ui-state-disabled"))
        this._std_clickHandler(event, target);
    };
Comments