Question

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 1

If you want to stop the section from even opening, this answer may be the fix you need: https://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);
    };