Skip to main content

jQuery Check if Toggle is Open/Closed

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Simple jQuery code snippets to check if toggle is open or closed. Basically, the current state can be determined by using this test:

$(this).is(":hidden").

Another way, as shown in the following example, is by using the data attribute to append a state of ‘open’ or ‘closed’ to the toggle button like so:

if (this.data('state') === 'closed') {
    $('.' + toggleBtnClass).innerText(moreText);
    _this.data('state', 'open'); /*add data to store state*/
} else {
    $('.' + toggleBtnClass).innerText(lessText);
    _this.data('state', 'closed'); /*add data to store state*/
}

To see this in action, check out the jQuery.autoToggles plugin.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.