How can I force jQuery UI to ignore certain elements in the Accordion

Question

I have a Jquery UI Accordion to which I add certain elements dynamically. I use self-written sorting code that allows me to add dynamic Accordion categories in the proper alphabetical order. The problem I have run into is that if the dynamic element goes at the very top or very bottom of the accordion then my sorting function fails.

I figured out a jimmy-rigged way that lets me bypass the problem with sorting by creating dummy elements inside the accordion with top one having id="0000000000000000000000000000" and a bottom element with id="zzzzzzzzzzzzzzzzzzzzzzzzzzz"

The problem is now the Accordion trips out not knowing how to handle these dummy elements, and no amount of display:none, visibility:hidden, disabled, or even data-role="none" fixes this problem.

My question is how can I add dummy elements to the very top and the very bottom of my accordion that will be completely ignored by accordion. It does not matter to me if the element is a div, span, img or whatever, any will work, as long as accordion will ignore them.

Thanks.

Answer 1

Although you can't explicitly specify which elements for Accordion to ignore, you can specify which ones it accepts by using the header option. I suggest adding a class called ignore to your top and bottom elements, then use the :not() selector to include any other elements that do not contain this class.

See the following jsFiddle for an example.

$('#myAccordion').accordion({
    header: 'h3:not(.ignore)'
}); 

Hope that solves your problem. As Interrobang says, the problem is most likely with the sorting.