Bootstrap accordion all panels to expand at once with a button

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

yanci1179Asked:
Who is Participating?
 
Julian HansenCommented:
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
 
Michael VasilevskySolutions ArchitectCommented:
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
 
yanci1179Author Commented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
yanci1179Author Commented:
this one worked for me

http://jsfiddle.net/KyleMit/f8ypa/
0
 
Julian HansenCommented:
The sample on that link does not do what the original question stated i.e. an openall / closeall button.
0
 
Julian HansenCommented:
@yanci1179,

Do you still require assistance with this post - if not please can you close and assign points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.