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

Exploring Object Arrays with Underscore.js

Executing HTTP Requests for Elements in an Array using JavaScript

Looking to showcase a loading gif inside a popover before swapping it out with ajax-generated content

Evaluation of HTML5 file upload functionality with unit testing

Finding the correct column in a drop-down menu based on a table array using AngularJS

What is the method for retrieving the name of a canceled file?

The comparison between importing TypeScript and ES2015 modules

Dim the background for all elements except for one

Obtain the real-time inventory quantity of the specific product variation in WooCommerce

Exploring JSON API Data with Vue Js

Present Different Content for Visitors Using Ad-Blocking Software

Leverage ajax/js to dynamically refresh a single select tag within a set of multiple

Integrating a conditional statement into the existing for loop code to conceal the covers

Utilize .map function to format a date string and generate a table

Transforming a file with a node module that lacks a .js class into a browseable format

Exploring the retrieval of data from .find within a JSON object using Node.js

Error message: `$injector:modulerr - Angular JS` - Indicates an

Converting this HTML/PHP code into JavaScript: A step-by-step guide

Using static methods within a static class to achieve method overloading in Typescript

After triggering an action, I am eager to make a selection from the store