CODEWITHSUNDEEP
twitter-bootstrapangularjsangular-ui
cYn
cYn

Reputation: 3381

Always Keep One Section Open Using AngularUI Collapse

Does any one know how to modify the Angular UI to only keep one section open like the jQuery Accordion?

Here is the Plunker code: http://plnkr.co/edit/zv8D1QdDs55iJ47UJhtM?p=preview

Upvotes: 0

Views: 1388

Answers (2)

Pixic
Pixic

Reputation: 1345

Good answer from @shaunhusain. I have made a similar solution, but allows you to have certain expanded together or only one at a time. This is of course more hands on, meaning you have to define which to collapse and which to expand in a function with if statements...like this:

$scope.chartTableActive = "btnBoth";
$scope.chartCollapsed = false;
$scope.tableCollapsed = false;

$scope.chartTableToggleFunction = function () {
    if ($scope.chartTableActive == "btnBoth") {
        $scope.chartCollapsed = false;
        $scope.tableCollapsed = false;
    } else if ($scope.chartTableActive == "btnChart") {
        $scope.chartCollapsed = false;
        $scope.tableCollapsed = true;
    } else if ($scope.chartTableActive == "btnTable") {
        $scope.chartCollapsed = true;
        $scope.tableCollapsed = false;
    }
}

Here's my JSFiddle.

Upvotes: 1

shaunhusain
shaunhusain

Reputation: 19748

Forked your plunkr

http://plnkr.co/edit/Cih5IeIe1m3ATBOPI61j?p=preview

angular.module('plunker', ['ui.bootstrap']);
function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = [true, true, true];

  $scope.openThis = function(e)
  {
    for(var i=0;i<$scope.isCollapsed.length;i++)
      $scope.isCollapsed[i]=true;
    $scope.isCollapsed[e] = !$scope.isCollapsed[e];
  }
}

and the HTML

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CollapseDemoCtrl">
    <button class="btn" ng-click="openThis(0)">Toggle collapse</button>
    <div collapse="isCollapsed[0]">
        <div class="well well-large">First content</div> 
    </div>

  <br/>

  <button class="btn" ng-click="openThis(1)">Toggle collapse</button>
  <div collapse="isCollapsed[1]">
        <div class="well well-large">Second content</div> 
    </div>

  <br/>

  <button class="btn"  ng-click="openThis(2)">Toggle collapse</button>
  <div collapse="isCollapsed[2]">
    <div class="well well-large">Third content</div> 
    </div>
</div>
  </body>
</html>

Upvotes: 2

Related Questions