Bootstrap 3 pills in side an accordion - javascript

I'm trying to combine pills and accordion in bootstrap 3.
It seems to work file, but I have two issues.
if the accordion is open, when clicking on another tab the accordion closes.
i would like it to close only when clicking on the active tab, otherwise i want it to show the clicked tab.
when clicking a tab on another accordion line, the tab in the previous line is still showing as active.
bootply code example:
here.
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li>Red</li>
<li class="active">Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.panel-default {
border: 0px;
}
.panel {
border: 0px solid transparent; */
border-radius: 0px;
-webkit-box-shadow: 0 0 0;
box-shadow: 0;
}


This solution can be re-used for as many panels in the page. Add data-collapse-toggle=" collapseOne" to the ul. The only issue here: I haven't found a solution for removing the 'active' state on the tab yet, so I used a 'selected' class instead. Any ideas are welcome, it would be better not having to use two classes.
Full working Bootply: http://www.bootply.com/Nk0w3EuBxd
The Javascript:
$('[data-collapse-toggle] li').click(function(){
var target = $('#' + $(this).parent().data('collapse-toggle'));
$(target).collapse({'toggle' : false }); //Fixes first time toggle error
if ( $(this).hasClass('selected') ){
$(this).removeClass('selected');
$(target).collapse('hide');
} else {
$(this).addClass('selected').siblings('li').removeClass('selected');
$(target).collapse('show');
}
});


As far as i understand you want to toggle the accordion only on the click of active tab.
you can use the collapse using javascript. Please find the working jsfiddle Here
$('#accordion .panel-heading ul#tabs li a').click(function(){
$("#accordion .panel-heading ul#tabsb li").removeClass('active');
if ($(this).parent('li').hasClass('active'))
{ $('#collapseOne').collapse('toggle'); }
else
{
$('#collapseOne').collapse({toggle:false});
$('#collapseOne').collapse('show');
}
});
$("#accordion .panel-heading ul#tabsb li a").click(function(){
$("#accordion .panel-heading ul#tabs li").removeClass('active');
if ($(this).parent('li').hasClass('active'))
{ $('#collapseTwo').collapse('toggle'); }
else
{
$('#collapseTwo').collapse('show');
}
});
in the html part make following changes:
you are using two ul with same id tabs , change the id of the second ul to tabsb
the part href="#collapseOne" to href="" as we will trigger collapse using js
the part href="#collapseTwo" to href=""
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li>Red</li>
<li class="active">Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" class="nav nav-pills" data-tabs="tabs">
<li>One</li>
<li>To</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane active" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
</div>
Update:
As Jesse Buitenhuis has suggested it will be better to use a single class. Add data-collapse-toggle=" collapseOne" to the ul. and use following js which solves both of your problem . js fiddle Here
$('#accordion .panel-heading ul li').click(function(){
var target = $('#' + $(this).parent().data('collapse-toggle'));
$("#accordion .panel-heading ul li").not($(this)).removeClass('active');
if ($(this).hasClass('active'))
{ target.collapse('toggle'); }
else
{
target.collapse({toggle:false});
target.collapse('show');
}
});
HTML
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabs" class="nav nav-pills" data-collapse-toggle="collapseOne" data-tabs="tabs">
<li>Red</li>
<li class="active">Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseTwo" class="nav nav-pills" data-tabs="tabs">
<li>One</li>
<li>To</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane active" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
</div>


You can use javascript.
http://www.bootply.com/jsIK8OjCBK
JS :
$(function(){
var p1 = $('#collapseOne .panel-collapse');
var p2 =$('#collapseTwo .panel-collapse')
$(p1).collapse({toggle: false});
$(p2).collapse({toggle: false});
$("#collapseOne .panel-heading ul li a").click(function(){
$(p1).collapse('show');
$(p2).collapse('hide');
$("#collapseTwo .nav .active").removeClass('active');
});
$("#collapseTwo .panel-heading ul li a").click(function(){
$(p2).collapse('show');
$(p1).collapse('hide');
$("#collapseOne .nav .active").removeClass('active');
});
});
HTML :
<div id="collapseOne" class="panel panel-default">
<div class="panel-heading">
<div data-parent="#accordion">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li>Red</li>
<li class="active">Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
</div>
</div>
<div class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div id="collapseTwo" class="panel panel-default">
<div class="panel-heading">
<div data-parent="#accordion">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
<li>One</li>
<li>To</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane active" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
</div>


If you want the active tabs to close when you click on them, modify Thibaud Graniers javascript to be something like this:
$(function(){
$("#collapseOne .panel-collapse").collapse('show');
$("#collapseOne .panel-heading ul li a").click(function(){
$("#collapseOne .panel-collapse").collapse('show');
$("#collapseTwo .panel-collapse").collapse('hide');
$("#collapseTwo .nav .active").removeClass('active');
if($(this).parent('.active').length){
$("#collapseOne .panel-collapse").collapse('hide');
}
});
$("#collapseTwo .panel-heading ul li a").click(function(){
$("#collapseTwo .panel-collapse").collapse('show');
$("#collapseOne .panel-collapse").collapse('hide');
$("#collapseOne .nav .active").removeClass('active');
if($(this).parent('.active').length){
$("#collapseTwo .panel-collapse").collapse('hide');
}
});
});


Thanks everyone.
Below is the final working code after a little editing:
Although i still have a small Issue:
when adding more then 2 lines, On the first load when clicking for example on "Blue", all other lines open a bit.
any advice?
Thanks
Avi
The code:
HTML
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabs" class="nav nav-pills" data-collapse-toggle="collapseOne" data-tabs="tabs">
<li>Red</li>
<li class="active">Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane active" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseTwo" class="nav nav-pills" data-tabs="tabs">
<li>One</li>
<li>To</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="One">
<h1>One</h1>
<p>One One One One One One</p>
</div>
<div class="tab-pane" id="To">
<h1>To</h1>
<p>To To To To To</p>
</div>
<div class="tab-pane" id="Three">
<h1>Three</h1>
<p>Three Three Three Three Three</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="Four">
<h1>Four</h1>
<p>Four Four Four Four Four</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseTree" class="nav nav-pills" data-tabs="tabs">
<li>Avi</li>
<li>Moshe</li>
<li>David</li>
</ul>
</div>
</div>
<div id="collapseTree" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="Avi">
<h1>Avi</h1>
<p>Avi Avi Avi Avi Avi Avi</p>
</div>
<div class="tab-pane" id="Moshe">
<h1>Moshe</h1>
<p>Moshe Moshe Moshe Moshe Moshe</p>
</div>
<div class="tab-pane" id="David">
<h1>David</h1>
<p>David David David David David</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="">
<ul id="tabsb" data-collapse-toggle="collapseFour" class="nav nav-pills" data-tabs="tabs">
<li>Table</li>
<li>chare</li>
</ul>
</div>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="Table">
<h1>Table</h1>
<p>Table Table Table Table Table Table</p>
</div>
<div class="tab-pane" id="chare">
<h1>chare</h1>
<p>chare chare chare chare chare</p>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$('#accordion .panel-heading ul li').click(function () {
var target = $('#' + $(this).parent().data('collapse-toggle'));
$("#accordion .panel-heading ul li").not($(this)).removeClass('active');
if ($(this).hasClass('active')) {
$('.collapse').collapse('hide');
target.collapse('toggle');
}
else {
$('.collapse').each(function() {
if(!$(this).is(target[0])){
$(this).collapse('hide');
}else{
console.log('MATCH');
}
});
target.collapse({toggle: false});
target.collapse('show');
}
});
bootply code example: here.
Thanks allot
Avi

Related

Bootstrap Wizard Issues

I am trying to use the twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) and for some reason when the first tab/pill the next button is showing that it is disabled. The button does work when I click on it, but it doesn't appear to be fully active.
Here is video of the functionality I am seeing. You will notice that when the tab first opens tab 1 is selected. The progress bar is a 0% and the next button is showing disabled. When I click next it does move to the next tab. When I go back to the first tab, the progress bar has the correct width for tab 1 and now the next button for tab 1 is no longer disabled. Ideally I would like this functionality to work from the beginning.
YouTube Video:
https://youtu.be/zq9yCCUJQ68
HTML:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
<li><a data-toggle="tab" href="#billing">Billing</a></li>
<li><a data-toggle="tab" href="#suppport">Support</a></li>
<li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
</ul>
<div class="tab-content">
<div id="mywebsites" class="tab-pane fade">
<!-- <div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>-->
</div>
<div id="billing" class="tab-pane fade">
<h3>Billing</h3>
<p>Some content in menu 2.</p>
</div>
<div id="suppport" class="tab-pane fade">
<h3>Support</h3>
<p>Some content in menu 2.</p>
</div>
<div id="newWebsite" class="tab-pane fade">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills" id="myTab">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onTabShow': function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard .progress-bar').css({width:$percent+'%'});
},
'tabClass': 'nav nav-pills',
'onNext': function(){alert("You hit next");}
});
});

I think the issue is happening because it is within another tab pane. I tried to append the HTML using JQuery using this and it seems to have resolved the issue.

Bootstrap Accordion Icons not changing Dynamically

I am trying to Add bootstrap Accordion to my project but its not working.... what is the problem with my code i have added below with JavaScript.
I am also including following files in my project.
Thanks in Advance.
Regards.
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-collapse-down').removeClass('.glyphicon-collapse-down')
}).on('hidden.bs.collapse', function () {
$(this).parent().find('..glyphicon-collapse-up').removeClass('.glyphicon-collapse-up').addClass('.glyphicon-collapse-down');
});
});
</script>

You can look for the previous element and find the span with a class of .glyphicon.
Then simply add or remove the up and down classes.
Here is an example.
$('.collapse')
.on('show.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-down')
.addClass('glyphicon-collapse-up')
})
.on('hide.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-up')
.addClass('glyphicon-collapse-down')
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

In order to change the accordion icons I would suggest to use:
.toggleClass() in order to change icons from down to up and vice versa,
show.bs.collapse event
hide.bs.collapse event
$(document).ready(function () {
$('.collapse').on('show.bs.collapse hide.bs.collapse', function () {
$(this).closest('.panel').find('.panel-heading .glyphicon').toggleClass('glyphicon-collapse-down glyphicon-collapse-up')
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Refer to this link. http://jsfiddle.net/panchroma/3gYa3/
Bootstrap accordion using only CSS
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

Prevent Expand/Collapse from nested Links

I have a web page that uses Bootstrap. In this page, I am using the Collapse component to toggle visibility of some elements. In each collapse component, I have some links and buttons. If a user clicks one of these links or buttons, I do NOT want the related content to expand collapse.
I have a Fiddle here, which contains the following:
<div class="container">
<div class="row" data-toggle="collapse" data-target="#parent1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
</div>
Somehow the event seems to be going up the chain even though I'm returning false in the event handlers. I'm not sure how to remedy this. Any help is appreciated it.

You just need to move "collapsing attributs" to the h2 rather than the div container that include you links, like that:
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2 data-toggle="collapse" data-target="#parent1">Parent 1</h2>
</div>
<div class="col-xs-8">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
</div>

You must remove the toggle attributes of each row and start the effect manually with JavaScript, then prevent the <button> and <a> elements from taking any action.
All your code would look like this
HTML
<div class="container">
<div class="row row1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
JavaScript
$(document).ready(function(e) {
//on click in row1 class init toggle effect
$(".row1").on("click", function(){
//collapse content
$("#parent1").collapse('toggle');
});
$("div.row2").click(function(){
$("#parent2").collapse('toggle');
});
$("div.row3").click(function(){
$("#parent3").collapse('toggle');
});
//on click in button or a return false
$("button, a").on("click", function(){
return false;
});
});

How to change active bootstrap tab with javascript

I have tried to change the active tab and failed to use the javascript onclick element correctly. Here's the code:
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class=“tab-content">
<div id="first" class="tab-pane fade in active">
Text
Second
Third
</div>
<div id="second" class="tab-pane fade in">
Text
</div>
<div id="third" class="tab-pane fade in">
Text
</div>
</div>
How could I be able to use the buttons to change the active tab to their associated id? Please advise.
Have a great day!

you may also use .tab('show') for more flexibility
https://codepen.io/jacobgoh101/pen/ALELNr
<button class="btn btn-primary" onclick="menu3()">go to menu 3</button>
javascript:
function menu3(){
$('[href="#menu3"]').tab('show');
}
Bootstrap documentation: https://getbootstrap.com/javascript/#tabs

You can trigger click on tab you want when click on your buttons
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class="tab-content">
<div id="first" class="tab-pane fade in active">
Text
<a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>
<a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>
</div>
....
</div>
here is a Demo

Here is your js
$('#submit').click(function (e) {
$('#myTab a[href=#tabs3-2k_tab2]').tab('show')
e.preventDefault()
});

I recommend the data attribute approach, is a clean solution and separate View from Controller code
go to menu 1
go to menu 2
javascript:
$('a[href="#btn-next"]').on('click', function(event){
event.preventDefault();
var tab = $(this).data('next');
$(tab).tab('show');
})

Updated on bootstrap5
<div class="tab-control" data-role="tab-control">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
var someTabTriggerEl = document.querySelector('#tab1');
var tab = new bootstrap.Tab(someTabTriggerEl);
tab.show();

Working example
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
$('button').addClass('btn-primary').text('Switch to Orange Tab');
$('button').click(function(){
$('#tabs a[href=#orange]').tab('show');
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<center><h6>Switching Among the Tabs</h6></center>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red </li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
<button>Blue</button>
</div>
</div>
</div>
</div>

This is simple and works.
function do_something () {
$('#profile-tab').click();
}

If you are using Scala, refer to https://www.tutorialspoint.com/ngx_bootstrap/ngx_bootstrap_tabs.htm,
namely:
<tabset>
<tab heading="View">
<tab heading="Configuration" (selectTab)="showConfig()==true" [active]="showConfig()">`
</tabset>
(you need both selectTab and active)...
The click() solutions suggested by others are working, but are generating exception "Expression has changed after it was checked." so it seams a bad habit, even if the exception is not raised in production mode.
//bad code!
ngAfterViewInit() {
if (thisCreation){
document.getElementById("tabConfig-link").click();
}
}

I recommended this codes.
<div class="tab-control" data-role="tab-control">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
Add effects that you want in class attribute.

How to close accordion when another opened?

I have an accordion. It's given in the below fiddle.
http://fiddle.jshell.net/7vRV9/
In this case when I click an element group one it will open, after that click element group 2. It also will open. But my requirement is when one is opened, all others should close, if I have several (now only two is there). How to implemement this one?

I hope this will work for you. Just replace below HTML snippet with your JSFIDDLE HTML. It will start work. Feel free to ask if you have any doubt.
<div class="accordion" id="food-category">
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#indian">Indian Food</div>
</div>
<div class="accordion-body collapse" id="indian">
<ul>
<li> Food 1</li>
<li> Food 2</li>
<li> Food 3</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#sea">Sea Food</div>
</div>
<div class="accordion-body collapse" id="sea">
<ul>
<li> Food 1</li>
<li> Food 2</li>
<li> Food 3</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#chinese">chinese Food</div>
</div>
<div class="accordion-body collapse" id="chinese">
<ul>
<li> Food 1</li>
<li> Food 2</li>
<li> Food 3</li>
</ul>
</div>
</div>
</div>

I have modified your code and made below changes :-
Might be id="accordion1" is creating some issue so I renamed this id with customTab and replaced respectively
Added < div class="accordion-group"> for better UI
Please test it. If you need further help please update me.
Also you can copy and paste below snippet in JSfiddle and test it :-
<div class="accordion " id="customTab">
<div class="accordion-group">
<!-- Element Group Heading -->
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse1">
<b>Element Group 1</b>
</a>
</div>
<!-- Elements -->
<div id="collapse1" class="accordion-body collapse">
<!-- -->
<div class="accordion" id="accordion1-1">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1-1" data-target="#collapseOne1-1">
<input type="radio" name="optionsCheckboxList" value="1"/>Element One
</label>
</div>
<div id="collapseOne1-1" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
<div class="accordion" id="accordion1-2">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1-2" data-target="#collapseOne1-2">
<input type="radio" name="optionsCheckboxList" value="2"/>Element Two
</label>
</div>
<div id="collapseOne1-2" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
</div>
</div>
<div class="accordion-group">
<!-- Element Group Heading -->
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse2">
<b>Element Group 2</b>
</a>
</div>
<!-- Elements -->
<div id="collapse2" class="accordion-body collapse">
<!-- -->
<div class="accordion" id="accordion2-1">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2-1" data-target="#collapseOne2-1">
<input type="radio" name="optionsCheckboxList" value="1"/>Element One
</label>
</div>
<div id="collapseOne2-1" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
<div class="accordion" id="accordion2-2">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2-2" data-target="#collapseOne2-2">
<input type="radio" name="optionsCheckboxList" value="2"/>Element Two
</label>
</div>
<div id="collapseOne2-2" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
</div>
</div>
</div>

Categories

Resources