I recently needed to open and close a jQuery Mobile collapsible widget from my own JavaScript code, in response to other events on the page. Unfortunately, looking at the documentation for the collapsible widget’s public methods, where you’d expect to find expand and collapse methods, you won’t find much help:

Manually firing a click on the collapsible div element is one option, as if the user had tapped it. I’ve never been a fan of that approach though, and especially not in frontend JavaScript. Co-mingling your internal flow control with events that are intended to be triggered by user input is a good way to find yourself with inconsistent issues that are difficult to reproduce and track down.

More importantly, I needed to control whether the widget was expanded or collapsed in this case. So, I really wanted to find a clean way to deterministically open and close the collapsible instead of toggling it. Luckily, there turned out to be an easy, straightforward way to do that.

Click here to read the rest of this post »