jQuery, detect if an element is already toggle

Question

I need with jQuery to know if an element on my page is already toggle or not.

I have a menu with XXX elements.

When i click on an element, i use : $("#elementXX").slideToggle("slow"); (XX is a number)

If i click on another element, i need to know if an element is already toggle, and i need to close this element before to slideToggle my new element.

How can i do that ? I can't check id by id like #element1, #element2, #element3 etc....

Thanks !

Answer 1

You don't need toggle, slideUp and slideDown are a much better fit for your scenario. You can simply do:

$("#clickedItem").click(function () {
    var wasVisible = $("#elementXX").is(":visible");
    $("[id^=element]:visible").stop().slideUp("slow");
    if (!wasVisible) {
        $("#elementXX").slideDown("slow");
    }
});

Answer 2

You can set the data attributes to some value to know if it is toggled. You can add the attributes in html or use script straightaway to add.

$("#elementXX").data("toggled", "true"); 

Answer 3

According to jQuery official website FAQ:

$("#toggleButton").click(function () {
   if ($("#elementXX").is(":visible")) {
      // toggled down
   }
   if ($("#elementXX").is(":hidden")) {
      // toggled up
   }
});

https://learn.jquery.com/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element/