Solved

Bootstrap accordion all panels to expand at once with a button

Posted on 2016-09-14
7
51 Views
Last Modified: 2016-10-10
I am trying to implement this solution: http://www.bootply.com/peFUdnwOpZ 
I just want a button where I can expand all of the accordions and another where I can collapse all of them.

I am using AngularJs 1.0,bootstrap, in Visual Studio.  After trying it with my accordions and having zero success, I just copied and pasted the code from the solution and it is still not working.  When I click on the button or the accordion, the whole thing disappears...  I have one html page in which I am also including the javascript.  Any ideas on what I am doing wrong.... Any help would be greatly appreciated, as I have tried to figure it out for the last couple days....



My index page has the following references:



<link href="../Content/bootstrap.min.css" rel="stylesheet" />

    <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css' />
    <script src="../Scripts/jquery-1.12.4.min.js"></script>
    <script src="../Scripts/jquery-ui-1.12.0.min.js"></script>

    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../Scripts/angular-resource.min.js"></script>
    <script src="../Scripts/bootstrap.js"></script>
    <script src="../Scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
    <link href="../Content/style.css" rel="stylesheet" />
    <script src="app.js"></script>

Open in new window



Below is the code that I have on my html page.  I placed the javascript at the bottom.

Thanks in advance!!

<div ng-controller="ILIHomeDashboardController">
    <div class="container">
        <a class="btn btn-default openall" href="#">open all</a> <a class="btn btn-default closeall" href="#">close all</a>
        <hr>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                            Collapsible Group Item #1
                        </a>
                    </h4>
                </div>
                <div class="panel-collapse collapse in" id="collapseOne">
                    <div class="panel-body">
                        ONe Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
                            Collapsible Group Item #2
                        </a>
                    </h4>
                </div>
                <div class="panel-collapse collapse" id="collapseTwo">
                    <div class="panel-body">
                        Two Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion">
                            Collapsible Group Item #3
                        </a>
                    </h4>
                </div>
                <div class="panel-collapse collapse" id="collapseThree">
                    <div class="panel-body">
                        Three Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $('.closeall').click(function () {
        $('.panel-collapse.in')
          .collapse('hide');
    });
    $('.openall').click(function () {
        $('.panel-collapse:not(".in")')
          .collapse('show');
    });


</script>

Open in new window

0
Comment
Question by:yanci1179
  • 3
  • 2
7 Comments
 
LVL 10

Assisted Solution

by:Michael Vasilevsky
Michael Vasilevsky earned 250 total points (awarded by participants)
ID: 41799005
Looks like you reference to bootstrap.js to broken. Try:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

See working example here: http://codepen.io/dikuw/pen/KgzvJp

Hope this helps!

mV
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 250 total points (awarded by participants)
ID: 41799290
There is an angular way of doing this - here is a sample using the Angular Bootstrap directive
HTML
<div ng-controller="ILIHomeDashboardController">
  <a class="btn btn-default openall" href="#" ng-click="openAllItems()">open all</a> 
  <a class="btn btn-default closeall" href="#" ng-click="closeAllItems()">close all</a>
  <accordion close-others="false">
    <accordion-group is-open="item[0].state" heading="Collapsible Group Item #1">
      ONe Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </accordion-group>
    <accordion-group is-open="item[2].state" heading="Collapsible Group Item #2">
      Two Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </accordion-group>
    <accordion-group is-open="item[3].state" heading="Collapsible Group Item #3">
      Three Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </accordion-group>
  </accordion>
</div

Open in new window

JavaScript
(function() {
  'use strict';
  angular.module('app',['ui.bootstrap'])
    .controller('ILIHomeDashboardController', function($scope) {
      $scope.item = [
        {state: true}, {state: false}, {state:false}
      ]
      $scope.openAllItems = function(){
        $scope.item.map(function(item){
          item.state = true;
        });
        console.log($scope.item);
      };

      $scope.closeAllItems = function(){
        $scope.item.map(function(item){
          item.state = false;
        });
      }
     });
})();
</script>

Open in new window

Working sample here
1
 

Author Comment

by:yanci1179
ID: 41799617
mvasilevsky,

Hi changed out the bootstrap.js reference to what you suggested and I got the error below:

Unhandled exception at line 23, column 9 in eval code

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'collapse'

It is complaining at the  collapse line
  $('.openall').click(function () {
        $('.panel-collapse:not(".in")')
          .collapse('show');
    });
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:yanci1179
ID: 41799814
this one worked for me

http://jsfiddle.net/KyleMit/f8ypa/
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41799913
The sample on that link does not do what the original question stated i.e. an openall / closeall button.
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41808229
@yanci1179,

Do you still require assistance with this post - if not please can you close and assign points.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question