Using bootstrap collapse with angularjs

Question

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>

score 96 · Accepted Answer · edited May 23 '17 at 12:18

96

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>

edited May 23 '17 at 12:18

Community

1
1

answered Jan 29 '14 at 19:57

GuillaumeA

3,493
4
35
69

4

This works. But you should also add an empty href to make the browser show the hand pointer when the mouse is placed over the link – HoffZ Mar 21 '14 at 08:37
3

I had the same problem. The given solution stops from redirecting to home page but the problem now is the list does not expand or collapse now. can anyone help? – Praburaj Jul 02 '15 at 07:04
It does not work at all. I am facing same issue like @prabu – Jay Momaya Dec 05 '17 at 09:53
This works thanks bro.. But only for Static content. – Abijith Ajayan Mar 19 '18 at 06:16

score 16 · Answer 2 · answered Jan 29 '14 at 16:14

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/

Benson · Answer 3 · 2017-01-10T03:46:36.783

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>

score 2 · Answer 4 · edited May 17 '16 at 14:05

2

Change all href in order to expand-collapse to data-target.
data-target and id of the div to be expanded and collapsed should not contain hyphen.

edited May 17 '16 at 14:05

aniski

1,263
1
16
31

answered May 17 '16 at 12:43

Tejaswini Kadu

71
4

score 0 · Answer 5 · answered Apr 23 '18 at 11:22

Click the buttons below to show and hide another element via class changes:

collapse hides content
collapsing is applied during transitions
collapse.in shows content

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

check this example below.

Bootsrap Example

<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>

Using bootstrap collapse with angularjs

5 Answers5

The basics

Putting it all together

Linked