CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Thomas Littler
Thomas Littler

Reputation: 177

Expand/Collapse all list elements in jQuery ui mobile

I'm trying to place a button on a webpage that uses jquery ui mobile to structure collapsible lists to expand/collapse all lists. However, I'm fairly new to jquery and javascript coding so I've run into a few problems. I've placed the button in but the code for it is not responding upon clicking it. How would I go about correcting this code so it successfully expands/collapses?

The code for the button is here:

<script type="text/javascript" src="js/jquery-1.11.2.min.js">

$('#collapsible1').click("click", showHide);

var collapsible = $('.collapsible');
collapsible.hide();

function showHide() {
    if(collapsible.is(':hidden'))
        collapsible.slideDown();
    else
        collapsible.slideUp();
}

</script>

The button is initialized as such:

<button id="collapsible1">Show/Hide</button>

The template I'm testing it in is here: http://jsfiddle.net/TLittler/9ndzm3cc/5/

Upvotes: 0

Views: 353

Answers (1)

ezanker
ezanker

Reputation: 24738

The collapsible widget has expand and collapse methods:

http://api.jquerymobile.com/collapsible/#method-expand

So you can expand all collapsibles like this:

$('[data-role="collapsible"]').collapsible( "expand" );

and collapse them like this:

$('[data-role="collapsible"]').collapsible( "collapse" );

Updated FIDDLE

Upvotes: 3

Related Questions