Search jQuery

jQuery Forum

How to show, hide, or disable one header in a jQuery UI accordion widget?

in Using jQuery UI • 5 years ago

I'm building my first page using ANY jQuery UI. I have set up an Accordion Widget, and I would like to be able to hide or disable one of the lower headers in it based on some actions in an upper one. Also, to re-enable based on the same sort of thing.

I know how to detect the action that should trigger this to fire a function, but I don't know how, within the jQuery UI system, to hide (with animation would be nice) or disable (with dimming or something would be nice, but not expandable in any case) one of the headers in the Accordion.

Can this be done?

Troy

Replies(4)

jakecigar

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

5 years ago

$("#accordion h3:last").addClass( "ui-state-disabled" );

would disable the last one.

JΛ̊KE

PS use .removeClass( "ui-state-disabled" ); to re-enable.

Troy Meye..

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

5 years ago

JΛ̊KE,

Thank you very much! Both actions worked as desired.

I actually want to do the 3rd header, though, rather than the last. Since I don't know what I'm doing at this level I tried:

$("#interview-accordion h3:3").addClass( "ui-state-disabled" );

...which did not work. What do I use instead of :last or :3 ?

Thanks again

Troy

watusiware

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

5 years ago

Use an nth-of-type selector. :3 is nonsense.

$("#interview-accordion h3:nth-of-type(3)").addClass( "ui-state-disabled" );

It's a CSS3 selector. You can use it in jQuery selectors, native API selection, and CSS style sheets.

If for some reason you can't use CSS3 (you're working on something for the US Navy, using Windows XP, doh!) jQuery has the :eq() extension. It is ONLY usable in jQuery selectors - not as CSS selection in a style sheet, etc.

$("#interview-accordion h3:eq(3)").addClass( "ui-state-disabled" );

:eq(3) is easier to write. I don't know which one is more performant. :eq() has the simplicity of simply selecting one element from a list of selected elements. nth-of-type() has the advantage of only selecting a single element in the first place. And performance is not likely an issue here.

Just be aware of the limitations of jQuery selector extensions - they can only be used as jQuery selectors as they are not real pseudo-selectors.

Troy Meye..

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

5 years ago

Thanks watusiware!

Works, thanks for the lesson.

Troy

Top Reply

Response title

Attachments

jQuery Forum

How to show, hide, or disable one header in a jQuery UI accordion widget?

Replies(4)

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

Re: How to show, hide, or disable one header in a jQuery UI accordion widget?

Statistics

Tags

Actions

Related Posts