• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 540
  • Last Modified:

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

0
yanci1179
Asked:
yanci1179
  • 3
  • 2
2 Solutions
 
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
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now