JQuery Mobile to check if a Div is Expanded or Collapsed

Question

I have a Div that is collapsible using attribute data-role="collapsible"

How can I check at any point in time whether the Div is in Collapsed mode or Expanded mode. I tried this but it doesn't work:

if ($("#hideshow").is(":collapsed"))
   alert("collapsed");

Please note that :visible won't work because in both states visible returns true.

Answer 1

This is done via CSS. When a collapsible element is collapsed, it has the class "ui-collapsible-collapsed" added. Use .hasClass() to check it

if ($("#hideshow").hasClass('ui-collapsible-collapsed')) {
    alert("collapsed");
}