My collapsible div looks like this and it collapse/expand on clicking btnCollapse.
As soon as I change the selection in dropdown, the collapsible div stop expanding. What am I doing wrong ? Any hints please ?
<div class="panel-heading" style="padding-bottom:20px;">
<h4 class="panel-title">
<a data-toggle="collapse" id="btnCollapse" href="#collapse1" style="float:right;">Hide Filter</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="col-sm-6">
#Html.DropDownListFor(m=>m.SelectedCat,new SelectList(Model.Cat, "Id", "Name"),"Select ..",new { #class= "form-control" })
</div>
</div>
Related
I'm trying to generate bootstrap collapse panels within Thymeleaf loop, like that:
<table>
<tr th:each="p, iterStat : ${completedList}">
<td style="padding: 0 15px 0 15px;">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" th:text="${p.key}">p.k</a>
<span style="float: right;" class="glyphicon glyphicon-ok"></span>
</h4>
</div>
<div th:id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<span th:text="${p.value}"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
But I have the same id and href for every element of the loop so the panels doesn't works.
Can I do something to change dynamically id and href?
You can use the status variable (iterStat) to create a unique id for every row:
<a data-toggle="collapse" data-parent="#accordion" th:href="'#collapse' + ${iterStat.index}" th:text="${p.key}">
and
<div th:id="'collapse' + ${iterStat.index}" class="panel-collapse collapse in">
I just ran into this same issue and what I did was
<div class="accordion" id="accordionExample"
th:each="todo : ${todos}">
<div class="accordion-item">
<h2 class="accordion-header" th:id="heading + ${todo.id}">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
th:attr="data-bs-target=|#col${todo.id}" aria-expanded="true"
aria-controls="collapseOne">Accordion Item #1</button>
</h2>
<div th:id="col + ${todo.id}"
class="accordion-collapse collapse show"
th:attr="aria-labelledby=|heading${todo.id}|"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also
worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
</div>
instead of concatenating the id, just add it as a string with the th:attr, then the value should be put inside the | {dynamic value e.g id, uuid, primary key} |.
then concatenate with the + for the th:id which will automatically know its equivalent attribute as set earlier.
I have multiple panels that can be opened and closed (expanded and collapsed), when you click on the panel header. I also have a button that can open and close all panels. It kind of works, but not 100%.
If you click on the header of one of the three panels, then the button to open and close all panels. Then two of the panels will open, and one will close. I would like it to close all panels or open all panels.
Also, sometimes the panel close, but the content of the panel is still visible.
Also, if you click on the header of the panel twice, opening and closing the panel, then the button to open and close all panels won't affect it anymore... Lots of bugs..
Made a fiddle to illustrate.
https://jsfiddle.net/fiddlejan/qz30pvjk/
HTML:
<body ng-app="app">
<div ng-controller="controller as c" style="padding:10px;">
<button class="btn" ng-click="add()" style="margin-bottom:5px;">
add panel
</button>
<button class="btn" ng-click="collapseAllPanels()" style="margin-bottom:5px;">
expand / collapse all panels
</button>
<!-- childeren -->
<div class="panel-group">
<div class="panel panel-info fadein fadeout " ng-repeat="p in panels">
<div class="panel-heading" data-toggle="collapse" data-target="#test_{{p}}" style="cursor:pointer">
<h4 class="panel-title">
open / close - {{p}}
<span class="glyphicon glyphicon-remove topright" ng-click="close(p, $event)"></span>
</h4>
</div>
<div id="test_{{p}}" class="panel-collapse collapse node-panel" aria-expanded="false">
<div class="panel-body">
hello {{p}}
</div>
</div>
</div>
</div>
</div>
</body>
The Jquery, triggered by AngularJS
$scope.collapseAllPanels = function() {
console.log("collapse / expand all panels");
$('.node-panel').slideToggle("medium", function() {
console.log("slide animation complete");
});
}
Try this
<div class="panel-group">
<div class="panel panel-info" ng-repeat="p in panels">
<div class="panel-heading" style="cursor:pointer" ng-click="openSinglePanel(this)">
<h4 class="panel-title">
open / close - {{p}}
<span class="glyphicon glyphicon-remove topright" ng-click="close(p, $event)"></span>
</h4>
</div>
<div id="test_{{p}}" class="panel-collapse collapse node-panel" aria-expanded="false">
<div class="panel-body">
hello {{p}}
</div>
</div>
</div>
</div>
$scope.openSinglePanel = function (panel) {
$(panel).slideToggle("medium", function() {
});
}
$scope.collapseAllPanels = function() {
$.each($('.node-panel'), function (key, panel){
$(panel).slideToggle("medium", function() {
//console.log("slide animation complete");
});
});
}
I am trying to handle multiple click events of bootstrap accordion tab in one function, but unable to handle that. I want the functionality Like that:-
(1) If user click on any accordion tab then the icon should be change to minus(-).
(2) If user click on any accordion tab then all other opened tab should be closed.
I am able to do this using different function for every tab. but I have to handle this using only one function as I have Multiple tabs.
here is my html code:-
<div ng-controller="TabController">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'FirstTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseOne">
<div class="mid-col">
<h5>First Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'FirstTab']"></div>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is content of First Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'SecondTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseTwo">
<div class="mid-col">
<h5>Second Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'SecondTab']"></div>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
This is content of Second Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'ThirdTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseThree">
<div class="mid-col">
<h5>First Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'ThirdTab']"></div>
</div>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
This is content of Third Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
Here is the Controller:-
var myapp = angular.module('plunker', []);
myapp.controller("TabController",function($scope){
$scope.clickOnTab = function($event,val){
console.log($event);
//console.log($event.currentTarget);
$scope.tabrighticon = !$scope.tabrighticon;
console.log($scope.tabrighticon);
if($scope.tabrighticon)
$scope.tabicon = val;
else
$scope.tabicon = 1;
};
});
Here is the plnkr
I have a navbar on the left side of my web application with each item of the menu having an expandable submenu to navigate through the pages. Unfortunately, every time I click on one of the links of a submenu the new page is loaded, but the submenu is collapsed again. I would like to have the submenu still expanded after clicking one of its links.
Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="nav-header panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<span class="glyphicon glyphicon-th"></span>Cluster
</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="nav-item"><span class="glyphicon glyphicon-eye-open"></span>#Html.ActionLink("overview", "ClusterAll", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-plus"></span>#Html.ActionLink("create", "ClusterCreation", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-pencil"></span>#Html.ActionLink("edit", "ClusterEdit", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
</div>
</div>
</div>
<div class="nav-header panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<span class="glyphicon glyphicon-hdd"></span>Applications
</h4>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="nav-item"><span class="glyphicon glyphicon-ok"></span>#Html.ActionLink("verify", "ApplicationPortfolioEdit", "Applications", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-list-alt"></span>#Html.ActionLink("manage", "ApplicationMassEdit", "Applications", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The actual menu has more items, this is just an example with 2 items to show you.
Any ideas what I have to do to keep the submenus expanded after clicking on its links?
I'm very new to web design, but I hope you can help me:)
If I get what you're trying to do you can pass the opened submenu as a # param in your url so when they do click a link to the new page you can have Javascript/jQuery read the # and open the proper submenu.
Something like this..
Applications
And then with Javascript & jQuery we can read it with..
$(document).ready(function() {
hash = window.location.hash;
$(hash).collapse('show');
});
We can use $(hash).collapse('show'); to show the content because you're using Bootstrap.
But this goes under the impression I understand what you're trying to say. :)
I have several Collapsible panels on one page triggered by a href links, and using php the first is set to active(open) when the user lands on the page.
Using jquery I'm trying to toggle the text in the links.
$(".btn[data-toggle='collapse']").click(function() {
$(this).text($(this).text() == 'Close' ? 'More' : 'Close');
});
But the first link which is open is working in reverse, so when the user clicks(to collapse the panel) it displays Close instead of More.
Any help would be greatly appreciated.
HTML:
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse535">Close</a>
<div id="collapse535" class="panel-collapse collapse in">
<!--Content-->
</div>
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse536">More</a>
<div id="collapse536" class="panel-collapse collapse ">
<!--Content-->
</div>
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse537">More</a>
<div id="collapse537" class="panel-collapse collapse ">
<!--Content-->
</div>
Toggle it on load:
$(function() {
$(".btn[data-toggle='collapse']:first").text("Close");
});