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>

Community · Accepted Answer · 2017-05-23 12:18:04Z

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Jan 29, 2014 at 19:57

GuillaumeA

3,5754 gold badges41 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HoffZ Over a year ago

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

Praburaj Over a year ago

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?

Jay Momaya Over a year ago

It does not work at all. I am facing same issue like @prabu

Abijith Ajayan Over a year ago

This works thanks bro.. But only for Static content.

Alex Choroshin · Accepted Answer · 2014-01-29 16:14:50Z

16

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/

answered Jan 29, 2014 at 16:14

Alex Choroshin

6,1872 gold badges31 silver badges36 bronze badges

Comments

Benson · Accepted Answer · 2017-01-10 03:46:36Z

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>

aniski · Accepted Answer · 2016-05-17 14:05:08Z

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, 2016 at 14:05

aniski

1,2811 gold badge16 silver badges31 bronze badges

answered May 17, 2016 at 12:43

Tejaswini Kadu

714 bronze badges

Comments

Kondal · Accepted Answer · 2018-04-23 11:22:08Z

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>

Collectives™ on Stack Overflow

Using bootstrap collapse with angularjs

5 Answers 5

4 Comments

Comments

The basics

Putting it all together

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

The basics

Putting it all together

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related