Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Bootstrap accordion all panels to expand at once with a button

Posted on 2016-09-14
7
Medium Priority
?
247 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
7 Comments
 
LVL 10

Assisted Solution

by:Michael Vasilevsky
Michael Vasilevsky earned 1000 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 59

Accepted Solution

by:
Julian Hansen earned 1000 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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 

Author Comment

by:yanci1179
ID: 41799814
this one worked for me

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

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 59

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

How to Create Failover DNS Record Sets in Route 53

Route 53 has the ability to easily configure DNS record sets specifically for failover scenarios. These failover record sets can be configured to failover to full-blown deployments in other regions or to a static HTML page that informs your customers of the issue.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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