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.
Related
I have a nav-pills element incorporated in my web page, which works perfectly.
The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.
What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.
<div class="card">
<div class="header">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills center-pills">
<li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
<li class="test">Menu 1</li>
</ul>
</div>
</div>
<div class="content">
<div class="tab-content">
<!--first tab-->
<div id="home" class="tab-pane fade in active">
<h3>Introduction</h3>
<p>Random Text </p>
<button id="next-step" class="btn btn-basic">Next</button>
</div>
<div id="menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<button id="back-step" class="btn btn-basic">Back</button>
</div>
</div>
</div>
</div>
</div>
My JavaScript looks like:
$('#back-step').click(function(){
$('link1').trigger("click");
});
$(".nav-pills a").click(function(){
if ($('#first').hasClass('active')){
$('#first').addClass('test').removeClass('active');
}
$(this).tab('show');
});
It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).
i need to display the a.php,b.php,c.php in the tabs tab2,tab3,tab4 respectively i have written the following code but the links a.php,b.php,c.php is not displaying in the tabs tab2,tab3,tab4 respectively instead of that if i click on the tab2 it redirects to the a.php page but i need to display in a tab manner in which if i click the tab2 it should display the a.php in the tab2 respectively what should i change to display the links on the tab ? kindly help me Thanks in advance
<script >
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
</script>
</head>
<body>
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
</body>
You can change the href link by using $("#tab1").attr("href", "#a.php");
$(function(){
$("#tab1").attr("href", "#a");
$("#tab2").attr("href", "#b");
$("#tab3").attr("href", "#c");
$("#tab4").attr("href", "#d");
});
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current"><a id="tab1" href="#tab-1">Tab 1</a></li>
<li><a id="tab2" href="#tab-2">Tab 2</a></li>
<li><a id="tab3" href="#tab-3">Tab 3</a></li>
<li><a id="tab4" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab">
<div id="a" class="tab-content">
<p>Tesing a.php </p>
</div>
<div id="b" class="tab-content">
<p>Tesing b.php </p>
</div>
<div id="c" class="tab-content">
<p>Tesing c.php </p>
</div>
<div id="d" class="tab-content">
<p>Tesing d.php </p>
</div>
</div>
</div>
Solution
Fix is to put your script code into a document ready function as below
<script>
$(window).load(function() {
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
});
</script>
Alternate Solution
Alternatively, you can workout as below.
As you are loading jquery from a third party domain, this document ready statements are executed first asynchronously. So download the jquery.min.js and load it from your local.
Hi everyone i am trying to make a jquery tab but i want to use it multiple like for example in one page have 100 tab what can i do on that time.
I am trying in this DEMO link. If you click one blue button then you can see the tab. Click the red buttons like STARKS button then other tab also doesn't work. Anyone can help me here ?
<div class="icon_c">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>
<div class="icon_b">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>
You have 2 issues.
The 1st is on the initTabs_ function.
It takes all the .panel divs for both MaterialTabs, it should take only the ones that are childs of the MaterialTabs element.
You should replace:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = document.querySelectorAll('.panel');
For:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = this.element_.querySelectorAll('.panel');
The seccond issue is with the tabs ids and href srcs in both panels references to the same ids, if you change the second panel as follows:
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel1" class="panel pactive">
a
</div>
<div id="lannisters-panel1" class="panel">
b
</div>
<div id="targaryens-panel1" class="panel">
c
</div>
</div>
</div>
It should work independently of the first one.
You can found the code modified here
Good Day Guys,
I just want to ask if how will I be able to get the real address in my tabbed form in in HTML/CSS.
right now I can only redirect to tabbed which is pre-set as active.
My goal is to create a link that will direct me to other tabbed page. for example, from other page want to create a link that will direct me to tabbed page 2nd tab .
here's my code:
<div class="tabs">
<ul class="tab-links">
<li class="active">All</li>
<li>Pending</li>
<li>Approved</li>
<li>Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
in the address bar it only shows this even I clicked other tab. stay with this address:
/domain/beta/page_home_superadmin.php
but in the lower side of the browser, it shows this when I hover at tab2:
/domain/beta/page_home_superadmin.php#tab2
any suggestion on how will to get that address and a be able to create a link pointing to it.
Thanks.
You can try to use document.location.hash
<div class="tabs">
<ul class="tab-links">
<li class="active tab1" id="tab1">All</li>
<li class="tab2">Pending</li>
<li class="tab3">Approved</li>
<li class="tab4">Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
JavaScript:
$(document).ready(function() {
if ( document.location.hash ) {
$('.tab-links > li, div.tab').removeClass('active');
$('li' + document.location.hash.replace('#', '.')
+ ', div' + document.location.hash).addClass('active');
}
});
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