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");
}

Answer 2

Use the getter of collapsed option for this:

 if ($("#hideshow").collapsible("option", "collapsed")) { alert("collapsed"); } 

Answer 3

Tested and working!

 if (metingblok.collapsible( "option", "collapsed") == false ) {
//then it is closed
}

  if (metingblok.collapsible( "option", "collapsed") == true) {
//then it is open
}

Answer 4

Try to use:

if ($("#hideshow").attr('data-role')=="collapsible")
    alert("collapsed");

Answer 5

This will do the trick:

if ($("#hideshow").attr('data-role')=="collapsible") {
  console.log("collapsed");
}

Instead of console.log , enter whatever you wish as processing.

Answer 6

DEMO

You can also use data getter/setter function.

var isCollapsed = $("#hideshow").data('role') == "collapsible";

if (isCollapsed)
       alert("collapsed");