Using bootstrap collapse with angularjs
I'm trying to include the below bootstrap collapsible panel in my angular application. However, when I click on "Expand", angular seems to see href="#collapseOne"
and then redirects to the home page instead of collapsing the panel. My routing looks like this, and I think the otherwise({redirectTo: '/home'});
is causing the problem. Any suggestions?
angular.module('App')
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}).
when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).
otherwise({redirectTo: '/home'});
}]);
The panel-
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Expand
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
Solution 1:
As mentionned in a similar question Here, simply change your href by the data-target attribute
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
Expand
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
Solution 2:
You can use the accordion directive from AngularJS UI Bootstrap that builds on top of twitter bootstrap the collapse directive.
example:
<accordion >
<accordion-group heading="Static Header, initially expanded" is-open="true">
This content is straight in the template.
</accordion-group>
</accordion>
Live example: http://jsfiddle.net/choroshin/U89bW/3/
Solution 3:
I had the same issue, and I didn't want to add an additional library beyond bootstrap. As recommended, you can usedata-target="#your-collapsing-element"
, removing the href
attribute completely.
The basics
To make a panel collapse you need:
-
On the element used to trigger collapse:
data-toggle="collapse" data-target="#my-collapsing-element"
-
On the element that collapses:
id="my-collapsing-element"
-
On the element wrapping both the "trigger" element and the collapsing element:
class="panel"
Putting it all together
You can optionally add parent elements to make it part of a group, and add add the css classes "collapse in
" to the collapsing element to make its default state closed. A full example:
<div id="accordion">
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
Heading 1
</a>
<div id="collapse1">
Content for panel 1
</div>
</div>
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
Heading 2
</a>
<div id="collapse2" class="collapse in">
Content for panel 2
</div>
</div>
</div>
You can get better button behaviors by using a <button>
element rather than an <a>
. Overriding bootstrap's styling for .panel
can be done by adding your own styling for the panel
css class.
<div class="panel its-my-panel">
.panel.its-my-panel {
margin-bottom: 0;
background-color: transparent;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.my-panel-heading {
cursor: pointer;
}
/* Overrides for .panel--theonly required bootstrap class */
.panel.my-panel-overrides {
margin-bottom: 0;
background-color: transparent;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="panel my-panel-overrides">
<a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
Collapsible Group 1</a>
<div id="collapse1" class="collapse in">
Content for panel 1
</div>
</div>
<div class="panel my-panel-overrides">
<a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
Collapsible Group 2</a>
<div id="collapse2" class="collapse">
Content for panel 2
</div>
</div>
<div class="panel my-panel-overrides">
<a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
Collapsible Group 3</a>
<div id="collapse3" class="collapse">
Content for panel 3
</div>
</div>
</div>
Solution 4:
- Change all
href
in order to expand-collapse todata-target
. -
data-target
andid
of thediv
to be expanded and collapsed should not contain hyphen.