Collapse nested accordion groups based on custom class - javascript

I'm using Twitter Bootstrap 2.3.2 with Asp.net MVC.
I have a set of nested accordions on a tab pane and other accordions on other tab panes.
The External accordions are in an accordion-group and the Internal accordions are in another group, nested inside each External accordion.
The colours are applied using CSS rules on custom classes.
.accordion-toggle.outcome {
background-color:#d9edf7;
}
.accordion-toggle.outcome.collapsed {
background-color:White;
}
.accordion-toggle.achievement {
background-color:#dff0d8;
}
.accordion-toggle.achievement.collapsed {
background-color:White;
}
I need to force the full collapse of the open accordions depending on which new accordion is selected. If an internal accordion is selected then I only want the other internal accordions to close. If an external accordion is selected I want the internal and external accordions to close.
Closing means assigning the 'collapsed' class to the accordion-toggle, which determines the highlight colour of the accordion-heading.
I have the following javascript which needs amending to select the different levels of accordion. The class of 'outcome' for External and 'achievement' for internal are currently the only difference between the two.
I've tried a variety of if/else combinations but none of them seem to work. I've included the javascript I use when changing tabs as this might change how I need to approach this.
<script type="text/javascript">
//need to collapse all when tab changes
$('a[data-toggle="tab"]').on('shown', function (e) {
$('.accordion').find('.accordion-toggle').addClass('collapsed');
$('.accordion').find('.accordion-body').removeClass('in');
$('.accordion').find('.accordion-body').height('0px');
}
);
//collapse accordion depending on class
// from https://github.com/twbs/bootstrap/issues/7213#issuecomment-18547519
$('.collapse').on('hide', function () {
//do something to select internal or external accordion here...
$('[href="#' + $(this).attr('id') + '"]').addClass('collapsed');
});
</script>
The HTML for the above accordion set is as follows:
<div class="accordion" id="interventions">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse12">
<label for="">Test Finance</label>
</a>
</div>
<div id="collapse12" class="accordion-body collapse">
<div class="accordion" id="intervention0">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse012">
<label for="">Achievement Finance 3</label>
</a>
</div>
<div id="collapse012" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion-group">Test group</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse111">
<label for="">Achievement Finance 2</label>
</a>
</div>
<div id="collapse111" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion-group">Test group</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse10">
<label for="">Huge Money</label>
</a>
</div>
<div id="collapse10" class="accordion-body collapse">
<div class="accordion" id="intervention1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention1" href="#collapse010">
<label for="">Achievement Finance 1</label>
</a>
</div>
<div id="collapse010" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion-group">Test group</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I managed to sort this out using the following javascript. The custom classes are only used by the CSS to apply the correct colour to an accordion-toggle when it is open or collapsed.
The css is amended to:
.accordion-toggle.outcome {
background-color:#d9edf7;
}
.accordion-toggle.achievement {
background-color:#dff0d8;
}
.accordion-toggle.collapsed {
background-color:transparent;
}
Thanks to Ammu for helping with this related question.
Javascript
//function to collapse all accordions when changing tabs
function tabCollapse() {
$('.accordion').find('.accordion-toggle').addClass('collapsed');
$('.accordion').find('.accordion-body').removeClass('in');
$('.accordion').find('.accordion-body').height('0px');
}
//function to fully collapse accordion on same page
function pageCollapse(inner) {
$('#' + inner).find('.accordion-toggle').addClass('collapsed');
$('#' + inner).find('.accordion-body').removeClass('in');
$('#' + inner).find('.accordion-body').height('0px');
}
//collapse all when tab changes
$('a[data-toggle="tab"]').on('shown', function () {
tabCollapse();
});
//collapse inner accordion on same page
$('.accordion').on('hidden', function (e) {
var inner = e.target.id;
pageCollapse(inner);
});
//on hide remove colour
$('.accordion').on('hide', function (e) {
var selected = e.target.id;
$('#' + selected).siblings().find('.accordion-toggle').addClass('collapsed');
});

Related

AngularJS and jquery to collapse / expand multiple bootstrap panels

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");
});
});
}

How can we handle multiple click events using one function in angularjs?

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

Accordion Icon is changing when Accordion-inner have some click events : Bootstrap 2.3 version

I am using bootstrap 2.3 in my project. In that there is one popover inside of accordion body, also accordions icons I am changing based on show and hide function it's working fine. But when I have any popover inside accordion body, Once that event is trigger my icon is changing.
Steps to produce issue:
open first Accordion
click the "click for popover" button and check weather accordion header icon is changed or not.
Try second time also, If it's not happened on first time.
My Fiddle
$('.accordion-group').on('show', function(event) {
$(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up');
event.stopPropagation();
});
$('.accordion-group').on('hide', function(event) {
$(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down');
event.stopPropagation();
});
$('#elem').popover();
.arrow-down {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAHwAAAB8ARUP7eQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACISURBVChTvc+xCoNAEIThDXkQH8FCYhGwsRLEgJ2lEN81VQg2toIW2qVK7z9RREEtHfjg7liWOTslIZzxeJhgYhU+uOmykwQd3rpEaNEg1cMiFzyh4Rc82BU5fqjxf5xS4AstUwMtmJNBm0r4eKCHhtViMzFUTzSsGkd/W9XbrLGXO9zxeG7MBoKmGaM1wCzfAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}
.arrow-up {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAbrQAAG60BIeRSlQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAANpJREFUOE9jGJzAwsJCyM7OztPMzIwPKkQ8sLe353F2dl7v6ur6BEjPBmI1qBRxAGgAh6OjY4m7u/t/oCF/gQacBtJuUGmiAQvQC7YuLi5fgZr/Ozk5fQCyC6ByxANLS0sxoAsuAzX/dXNz+w9kzwKGDydUmijADPSSA9AVv4CG/Ae5CIhjoXL4gY2NjSjQxlKghtdQb5wGGhYClcYPgBotgQG5BqjxN9TpM4CaNaDS+AEoDQA13ABpBNr+G2hQkpWVFS9UmijABDTAEGj7DqAhIFuZIMLYAAMDAPuUQ9EUeG3QAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}
.well {
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle arrow-up" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p>first table</p>
<p>First Content</p>
<div class="well">
<a id="elem" href="#" class="btn btn-danger" rel="popover" data-original-title="Example Popover" data-content="Readymade terry richardson fap iphone skateboard. Lomo fixie pop-up, whatever pickled pour-over keytar selvage godard.">cliick for popover</a>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle arrow-down" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>second table</p>
<p>second Content</p>
</div>
</div>
</div>
</div>
you don't have to do the "extra" work for changing the arrow. Bootstrap adds/removes collpased class based on accordion-group state. you can use this class name to change the arrow state.
html
add collapsed class name to set the accordion in collapsed state
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a>
and remove in class name from corresponding content div
<div id="collapseOne" class="accordion-body collapse"></div>
css
.accordion-toggle.collapsed {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAHwAAAB8ARUP7eQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACISURBVChTvc+xCoNAEIThDXkQH8FCYhGwsRLEgJ2lEN81VQg2toIW2qVK7z9RREEtHfjg7liWOTslIZzxeJhgYhU+uOmykwQd3rpEaNEg1cMiFzyh4Rc82BU5fqjxf5xS4AstUwMtmJNBm0r4eKCHhtViMzFUTzSsGkd/W9XbrLGXO9zxeG7MBoKmGaM1wCzfAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}
.accordion-toggle {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAbrQAAG60BIeRSlQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAANpJREFUOE9jGJzAwsJCyM7OztPMzIwPKkQ8sLe353F2dl7v6ur6BEjPBmI1qBRxAGgAh6OjY4m7u/t/oCF/gQacBtJuUGmiAQvQC7YuLi5fgZr/Ozk5fQCyC6ByxANLS0sxoAsuAzX/dXNz+w9kzwKGDydUmijADPSSA9AVv4CG/Ae5CIhjoXL4gY2NjSjQxlKghtdQb5wGGhYClcYPgBotgQG5BqjxN9TpM4CaNaDS+AEoDQA13ABpBNr+G2hQkpWVFS9UmijABDTAEGj7DqAhIFuZIMLYAAMDAPuUQ9EUeG3QAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}
js
remove the handles for show and hide
// $('.accordion-group').on('show', function(event) {
// $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up');
// event.stopPropagation();
// });
// $('.accordion-group').on('hide', function(event) {
// $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down');
// event.stopPropagation();
// });
$('#elem').popover();
check this fiddle
With the solution from above Fiddle , We need to add below line in bootstrap js plugin Where Accordion collapse options are there. We need to find "Show:function" for collapse and add line at end of that function
this.$element.prev().find('.accordion-toggle').removeClass('collapsed')

Bootstrap3: How to use two off-canvas sidebars?

I have this template that initially shows:
Sidebar1 - Content - Sidebar2
But when the user is in mobile view, I need to disappear the two sidebars and that this can be opened by a button, one at a time...
Button1 - opens sidebar1 to the right.
Button2 - opens sidebar2 to the left.
Anyone know if this is possible or has it done?
Code
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-2 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
<div class="col-xs-12 col-sm-6">
<p class="pull-left visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas1">
Filters <i class="fa fa-arrow-right"></i>
</button>
</p>
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
<i class="fa fa-arrow-left"></i>
Details</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
</div><!--/span-->
<div class="col-xs-3 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
</div>
Javascript
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
Let's give this a try... I added a new row at the bottom of your current HTML to represent the same exact links that are displayed on the edges but are hidden until a button is toggled. Let's take a look at the HTML first:
HTML
<div class="row">
<div class="col-xs-3 col-sm-3 sidebar-offcanvas hide trial2" id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
<div class="col-xs-3 col-sm-3 sidebar-offcanvas pull-right hide trial " id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
</div>
As you can see, I copy and pasted the exact same HTML and added the following classes: hide, trial, trial2
Class hide: This is a built in BootStrap class that hides all content within the specified tag. I toggle this class with jQuery later on.
Class trial/trial2 : This is just a random name I chose to make sure the toggle effect was going to work, you can virtually name it whatever you want, but just make sure you reference the tag.
Let's look at the new jQuery:
jQuery
$('[data-toggle=offcanvas]').click(function () {
$('.trial2').toggleClass('hide');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.trial').toggleClass('hide');
});
It's virtually the same code you had but I have it now toggling the hidden content.
Conclusion:
I added a few other things as well - such as the ability to hide the two side-navigation bars as the screen shrinks to a smaller size. Just take a look at the code I will provide via a JSFiddle and you will understand it a bit better.
DEMO JSFiddle
I fixed like this:
HTML
<div class="row-fluid row-offcanvas row-offcanvas-left">
<div class="row-fluid row-offcanvas row-offcanvas-right">
<div id="filters"></div>
<div id="content">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav nav-pills">
<li class="visible-xs"><a> <span class="glyphicon glyphicon-filter" data-toggle="offcanvas" data-target=".sidebar-nav"></span> </a></li>
<li class="visible-xs"><a> <span class="glyphicon glyphicon-list-alt" data-toggle="offcanvas1" data-target=".sidebar-nav"></span> </a></li>
</ul>
</div>
</nav>
</div>
<div id="detail"></div>
</div>
JAVASCRIPT
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas-left').toggleClass('active');
});
$('[data-toggle=offcanvasa]').click(function() {
$('.row-offcanvas-right').toggleClass('active');
});

Using bootstrap scrollspy for a div with collapse, to an affixed sidebar

I have this code as the layout of the page. The span9 div cotains sections that should apply the scrollspy. Each section is a set of collapsible divs that contains the actual content. The span3 div is the affixed sidebar and must highlight the correct item using the scrollspy.
<div class="span3 module-sidebar">
<ul id="sidebar" data-spy="affix" data-offset="250" data-offset-bottom="0" class="nav nav-list bs-docs-sidenav affix">
<li>
<i class="icon-chevron-right"></i>Module1 Name
</li>
</ul>
</div>
<div class="span9" data-spy="scroll" data-target="#sidebar">
<section id="module1">
<div class="page-header">
<h1>Module1 Name</h1>
</div>
<div class="bs-docs-example">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#function1">Function1 Name</a>
</div>
<div id="function1" class="accordion-body collapse in">
<div class="accordion-inner">
<h3>Topic1 Name</h3>
<p>Topic1 Desc</p>
<h4>SubTopic1 Name</h4>
<p>SubTopic1 Desc</p>
<h4><img src="../assets/img/manuals/module1/function1/step1.png"/></h4>
<p>Step1 Desc</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
The problem is that when i collapse the div to show the content, the scrollspy won't recognize the newly occupied space by that collapsible div. and thus highlights the next items in the sidebar when I scroll through the content of that collapsible div.
What i want is for the scrollspy to 'see' the space when the collapsible div is expanded. Any help would really be appreciated. Click here for the fiddle.
You should call .scrollspy('refresh') :
$(document).ready(function () {
$('.accordion').on('shown hidden', function () {
$('body').scrollspy('refresh');
});
});

Categories