Open multiple accordion sections simultaneously

Question

Open multiple accordion sections simultaneously

In my current setup, I have a paginated loop of elements that contains an accordion. The accordion is implemented using angular-ui-bootstrap.

<div data-ng-repeat="m in results">
    <div class="stuff_in_the_middle">
        <accordion id="accordion_{{$index+((currentPage-1)*20)+1}}"  close-others="false">
            <accordion-group>
                [...content...]
            </accordion-group>
            <accordion-group>
                [...content...]
            </accordion-group>
            <accordion-group>
                [...content...]
            </accordion-group>
        </accordion>
        <span id="toggle_{{$index+((currentPage-1)*20)+1}}" onClick="openAllGroups">Toggle groups</span>
    </div>
</div>

I am interested in finding out if there is a way to expand all the accordion-group elements simultaneously by clicking on the Toggle link once. Is this achievable?

javascript angularjs accordion angular-ui-bootstrap

Answer 1

Answer №1

If you want to add a collapseall directive to the accordion-groups, you can customize it by setting the isOpen variable based on the parent controller and toggle all button.

NOTE: Check out the working demo here.

JavaScript Code:

.controller('MyCtrl', ['$scope', function($scope) {
    $scope.opened = false;
}])

.directive('collapseall', [function() {
    return {
      restrict: 'A',
      scope: {
        collapseall: '='
      },
      link: function(scope, elem, attrs) {
        scope.$watch('collapseall', function(newval, oldval) {
          scope.isOpen = newval;
        })
      }
    }
  }
])

HTML Code:

<div>
    <accordion close-others="false">
        <accordion-group heading="Item 001" collapseall="opened"> 
        </accordion-group>
        <accordion-group heading="Item 002" collapseall="opened">
        </accordion-group>
        <accordion-group heading="Item 003" collapseall="opened">
        </accordion-group>
    </accordion>
    <button class="btn" ng-click="opened=!opened">Toggle groups</button>
</div>

Answer 2

If you want to add a collapseall directive to the accordion-groups, you can customize it by setting the isOpen variable based on the parent controller and toggle all button.

NOTE: Check out the working demo here.

JavaScript Code:

.controller('MyCtrl', ['$scope', function($scope) {
    $scope.opened = false;
}])

.directive('collapseall', [function() {
    return {
      restrict: 'A',
      scope: {
        collapseall: '='
      },
      link: function(scope, elem, attrs) {
        scope.$watch('collapseall', function(newval, oldval) {
          scope.isOpen = newval;
        })
      }
    }
  }
])

HTML Code:

<div>
    <accordion close-others="false">
        <accordion-group heading="Item 001" collapseall="opened"> 
        </accordion-group>
        <accordion-group heading="Item 002" collapseall="opened">
        </accordion-group>
        <accordion-group heading="Item 003" collapseall="opened">
        </accordion-group>
    </accordion>
    <button class="btn" ng-click="opened=!opened">Toggle groups</button>
</div>

Open multiple accordion sections simultaneously

Answer №1

Similar questions

Sorting a 2D array in Javascript based on numerical values

Unique Revision: "Identification Zone within a Single-page Application"

What is the best method for enclosing all text within an HTML document with a different element?

Incorporating CSS Styles in EJS

Having trouble parsing an XML received from AJAX request

What are the reasons for the success function not being called and what steps can be taken to correct it

Leveraging web workers for asynchronous API calls

Manipulating Data in TypeScript: Creating a Mutated Copy of a List of Dictionaries

What is the optimal placement for promises in Angular: Factory or Controller?

Exploring Angular 8 Route Paths

What is the most efficient method for creating and adding an element in jQuery?

What sets Firebase apart from Express in terms of its core functionalities?

Tips for adding a new column to a website

Utilizing the Yelp API and/or the Google Places API for project development

Switch the selected option in JQuery UI dropdown using a clickable button

The latest update to the Server Stats code mistakenly changes the channel to "undefined" instead of displaying the total number

Having trouble locating node_modules/nan on your system?

Setting up a Progressive Web App installation feature with a built-in delay from a

Trouble with AJAX request on iPad, works perfectly on desktop

Using React to Dynamically Display JSON Data as HTML