CODEWITHSUNDEEP
javascriptbuttonjquery-mobile
Wojciech Krzysiek
Wojciech Krzysiek

Reputation: 21

Jquerymobile - button to expand / collapse all

I try to do in one button function to expand or collapse whole list. I found this website Filterable Opens Matching Collapsibles, but I want do this in one button. I try something like this:

<script>
      $(document).on("pagecreate", "#punktyKontrolne", function () {
          $(document).on("click", ".collapseExpand", function(){
              if ($('#listviewContent').hasClass("ui-collapsible-collapsed")){
                $('#listviewContent [data-role="collapsible"]').collapsible("option", "collapsed", false);
              }
              else {
                var collapseAll = this.id == "ZwinRozwinWszystko";
                $('#listviewContent [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll);
              }

          });
      });
    </script>

But it not's working. Only works collapse (else in code).

Thank's for help.

Upvotes: 1

Views: 478

Answers (1)

ezanker
ezanker

Reputation: 24738

I wrote that article you linked.

It depends on your exact requirements. Omar gave a nice response at that website that will expand all if any are collapsed, otherwise it will collapse all:

$(document).on("click", ".collapseExpand", function(){
    var collapseAll = $('#filterList [data-role="collapsible"] .ui-collapsible-heading-collapsed').length > 0 ? "expand" : "collapse";
    $('#filterList [data-role="collapsible"]').collapsible(collapseAll);
});

DEMO

If on the other hand you just want to do the opposite action of the last time you clicked the button regardless of how many items are currently expanded/collapsed, you can save the previous state to a data-attribute:

$(document).on("click", ".collapseExpand", function(){
    var collapseAll = $(this).data("expand") == false ;
    $('#filterList [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll);
    $(this).data("expand", collapseAll ? false : true);
});

DEMO

Finally, if you want all collapsed items to expand and all expanded items to collapse, in other words, each item flips its current expanded state:

$(document).on("click", ".collapseExpand", function(){
    $('#filterList [data-role="collapsible"]').each(function(idx){
        $(this).collapsible("option", "collapsed", $(this).find('.ui-collapsible-heading-collapsed').length > 0 ? false : true);
    });
});

DEMO

Upvotes: 1

Related Questions