I found this accordion effect which works very nicely: http://angular-ui.github.io/bootstrap/
But I need the accordion to open differently, so that the content of each accordion-group appears above the accordion-header that opens it. Just wondering if anyone knows a simple way to accomplish this or if I'll have to make my own custom accordion.
The UIBootstrap accordion does not support having the panel content above the title by default.
Below is the accordion-group.html template, which is the HTML for each panel. As you can see there is currently no logic to cover your use case.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
</div>
https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html
However, it should be fairly simply to modify this file to have the title below the content. Simply change this template to have the divs in the order you prefer.
<div class="panel panel-default">
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
</div>
I would suggest taking a fork of the repository on GitHub, so you can make your changes without losing the benefits of version control. http://github.com/angular-ui/bootstrap
Related
I have created a nested accordian bootstrap panel. On clicking the parent(top most) panel heading - dropdown works fine but on clicking the child(sub panel heading) panel heading-dropdown wont work. I am retriving panel contents(sub panel heading and body) using angular $http.get rest api.
In this case, i think i did a mistake in syntax while linking the panel heading and panel body with its href and id attribute values( ng-href="{{productline_name}}" and id="{{productline_name}}" ).
Below code is placed inside top most panel body to create nested panel
<div class="panel-group col-lg-3" style="background-color:#505054;height:450px" id="accordion">
<div class="panel" style="background-color:#505054;color:#C1C1C1;border-bottom: 1px solid #eee;">
<h6>Clear Filter</h6>
</div>
<div class="panel" style="background-color:#505054;color:white;border-bottom: 1px solid white;">
<div class="panel-heading">
<h6>
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">PRODUCT</div>
</h6>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li class="panel-title"><a ng-click="cfilter('all')"><h5>All Records</h5></a></li>
<li ng-repeat="pline in detpline" class="panel-group" id="accordion2">
<div class="panel" style="background-color:#505054;color:white;border-bottom: 1px solid white;">
<div class="panel-heading" ng-click="plinefunc(pline.productline_name)">
<h6>
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" ng-href="{{productline_name}}">{{pline.productline_name}}</div>
</h6>
</div>
<div id="{{productline_name}}" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li class="panel-title" ng-repeat="prd in detp"><a ng-click="cfilter(prd.product_name)"><h5>{{prd.product_name}}</h5></a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Can any one help in this? what is the correct syntax to use to link panel heading and panel body via binding expresion?
Note: I am using binding expression for linking only to avoid opening all other sub panel heading contents on-clicking one of the sub panel heading.
I am using angular bootstrap's directive for showing accordion in my website. How am I supposed to add a href attribute to this uib-accordion element such that on clicking that element the url changes.
In that way you can do it. There was a need to see what code is put into html file from uib-accordion.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
ABCD
</h3>
</div>
</div>
code work fine when it is single page but when i add in my angular app then code is not working,when user click on accordion header then it link to (#collapse id)
what is wrong with my code when i adding to my app.
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<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="#collapse1">login</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<form>
<input type="text">
<input type="password">
<input type="button" value="login">
</form>
</div>
</div>
</div>
</body>
</html>
If you want to use Bootstrap components like Accordion with AngularJS you'll need to use the specific bindings for them. They can be found (with some example code) at this GitHub project.
You'll need to swap the normal Bootstrap JavaScript file for the one above, and make sure you get the version with the templates included otherwise it won't work out of the box. The file with the templates included has tpls in the file name. There are plenty of examples of how to use this code, but feel free to ask if you have any more problems.
I am using Angular and Angular-strap, the project is almost done but the client wants me to change the behavior of an accordion I am using, I will not use Angular-ui just in case that you want to mention that, I am using the regular Bootstrap Collapse plug in, as you know in order to have it working you need to set up some attributes, the problem I have now is that every single accordion has a unique id, but as I mentioned above I am generating just one accordion in my HTML with dynamic data which is in charge of generating more accordions according to the data that I am requesting from the DB, but all of the accordions has the same id, so the behavior of my accordion is weird, is opening and closing only the first panel, if I click the second panel, the first one closes automatically but the second keeps closed.
This is my html:
<div class="panel-heading" id="headingOne" ng-click="addSportToLines(sport)">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
{{::sport.name }}
</a>
<span class="pull-right badge">{{::sport.leagues.length }}</span>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<div class="list-group leagues-margin">
<a href="javascript:void(0)"
ng-repeat="league in sport.leagues"
ng-click="addLeagueToLines(league)">{{:: league.name}}
</a>
</div>
</div>
and I am sure that the issue is on this line of code
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
{{::sport.name }}
</a>
or here:
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingOne">
or both... someone has an explanation ?
how can I do to provide different ids or what options do I have?
is something similar to this https://wordpress.stackexchange.com/questions/168420/getting-bootstrap-accordion-working-in-wordpress-loop-with-custom-post-type-col but with out the php code.
I'm losing my mind with this code:
<div class=" col-md-3 col-lg-2 hidden-xs hidden-sm">
<div class="panel-group" id="mainMenuCollapsible">
<div ng-repeat="item in menuItems">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#mainMenuCollapsible" href="#collapse_{{ $index }}">
{{ item }}
</a>
</h4>
</div>
<div id="collapse_{{ $index }}" class="panel-collapse collapse" >
<div class="panel-body">
BLA BL
</div>
</div>
</div>
</div>
</div>
</div>
There no chance to get this working. When I click the title of any panels page reloads showing the panel selected but with no visual effects. My code is exactly the same as bootstrap example.
I have all jss in the right place (jquery 2.0.3, bootstrap.min 3.0.2, angular 1.2).
I also tried removing ng-repeat and doing with a single panel with no luck. What am I missing? Many thanks.
Solved my self. It's angular that intercept the route #collapse_X. Using data-target instead of href:
data-target="#collapse_{{ $index }}"
solved perfectly!
Hope this helps someone.