How to manage empty jQuery Accordion Panels? How to disable click on Accordion Header?

jquery-ui, jquery-ui-accordion

Solution

You can try with http://api.jqueryui.com/accordion/#event-beforeActivate

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );

In function you can test `ui.newPanel`, if empty then cancel activation of that panel.

I created jsfiddle example: http://jsfiddle.net/npthU/1/

    $( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {

       if($.trim($( ui.newPanel ).html()).length == 0)
          event.preventDefault();

    });

Used `event.preventDefault();` to disable opening of specific panel that has empty div.

Problem

I am using Accordionn jQuery Controls, you can find URL below: Accordion: http://jqueryui.com/accordion/ Issue: How can we manage empty menus un-clickable; example - If I do'nt have any item on 'Section 2' menu it shouldn't be clickable. When i do this it's either make the next parent menu item child to previous one and distorted or if i only leave a emtpy `<div>` it opens a blank menu instead un-clickable. Can anyone help?

Original source