kubedan kubedan - 1 year ago 110
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


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


$(function() {
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 Source

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.

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download