hi guys i want to make a vertical nav-tab with nested sub nav-tab i used a sample code from stackoverflow here is jsfiddle but i need somthing more complex i try but did not get what i want below is the scree shot what i exactly want if any one have idea on it please provide me some suggestion it should be on bootstrap 2.3
below is code
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#Tab2">Tab2</a>
</li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a>
</li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a>
</li>
<li> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="supersub" data-toggle="tab" href="#Subtab1">My Super Sub</a></li>
</ul>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
<div class="tab-pane fade" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
</div>
</div>
</div>
You can do something like this:
.nav-tabs > li li {
margin-left: 60px;
}
That'll do the trick.
http://jsfiddle.net/gqfhZ/
Related
i have this code and its working but not properly.
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
when i click each once its showing the content correctly
but its not working properly and leaving the active and show class when i click on different submenu (ex. B1 and A3 back-and-forth )
my data is dynamic.
I've played a bit and noticed what you reported, then I went to Bootstrap source which tells it is a BS limitation (see show method).
Then the simple options I see are basically 2:
Handle the tabs clicks manually: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
Working example: https://codepen.io/cdtapay/pen/bzegNB
Not being semantic and keeping all of the links in the same list (ul), including the section labels. Working example: https://codepen.io/cdtapay/pen/QYNRwb
Hope it helps.
UPDATE
: There is an issue reported about the show class being leaked: https://github.com/twbs/bootstrap/issues/28118
I have tested it on codepen, and it works like a charm, the active class is removed when clicking another toggle.
https://codepen.io/fazlurr/pen/QYNPBe
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
Maybe the way you generate the ids is not right.
I have a list of meals eaten during the day, categorized by meal: breakfast, lunch and dinner, each with its respective courses. The tab contents show the quantities.
Link on jsFiddle: https://jsfiddle.net/3ma0yt7k/2/ (code gets too long to paste the bulk of it in)
<div class="container">
<div class="tabbable boxed parentTabs">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#meal1">Breakfast</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lunch">Lunch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dinner">dinner</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#all">See All Meals</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show in" id="meal1">
<div class="tabbable">
<ul class="nav nav-pills active nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#yoghurt">yoghurt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cornflakes">corn flakes</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show fade active in" id="yoghurt">
<div class="form-group row">
<p>3 cups of yoghurt</p>
</div>
</div>
<div class="tab-pane fade" id="cornflakes">
<div class="form-group row">
<p>4 bowls of cornflakes</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="lunch">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#fries">Fries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#falafel">Falafel</a>
</li>
</ul>
<div class="tab-content table-top">
<!--pane detail-->
<div class="tab-pane show fade active in" id="fries">
<p>4 plates of fries</p>
</div>
<div class="tab-pane fade in" id="falafel">
<p>4 bowls of falafel</p>
</div>
</div>
</div>
</div>
<!--dinner-->
<div class="tab-pane fade in" id="dinner">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#pasta">Pasta</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pizza">Pizza</a>
</li>
</ul>
<div class="tab-content table-top">
<div class="tab-pane show fade active in" id="pasta">
<div class="form-group row">
<p>3 plates of pasta</p>
</div>
</div>
<div class="tab-pane fade" id="pizza">
<div class="form-group row">
<p>3 slices of pizza</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="all">
<p>gather them all</p>
</div>
</div>
</div>
</div>
I want to click "See all meals" and get a list with all the .tab-pane elements for each of the meals of the day. Basically clicking "see all" should show the panes with the text concerning yoghurt, corn flakes, fries, falafel, pasta and pizza (without the 'children' panes).
I can only gather them up if they are in a single category, or parent-child relationship (like Breakfast where each .tab-pane gets a class of 'active' but that doesn't work for the other ones (unless clicked)?
Apparently the only way to achieve this is to add an extra class to the top-most row of the tabs. this class will then be toggled to display "none" and the elements inside will all have an additional class of "active show".
<div class="tab-pane active **toggle-showing-of-this-class** fade show in" id="meal1">
If anyone has another more elegant solution in the meanwhile it would be nice.
I have the following script:
$(".btn.btn-default").click(function () {
$(this).siblings().removeClass('active').end().addClass('active').val($(this).text());
if (this.id.contains('fear')) {
$('#fear').val($(this).text());
} else if (this.id.contains('control')) {
$('#control').val($(this).text());
} else if (this.id.contains('danger')) {
$('#danger').val($(this).text());
$('#tab2').tab('show');
}
});
Focusing specifically on when #danger is clicked, I'm trying to change the bootstrap tab with:
$('#tab2').tab('show');
however it does not seem to work. Any ideas?
//Updated with tab html
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Step 1</a></li>
<li><a data-toggle="tab" href="#tab2">Step 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div id="obj" class="draggable drag-drop"> Grass </div>
<div id="obj" class="draggable drag-drop"> Tree </div>
</div>
<div id="tab2" class="tab-pane fade in active">
<div id="act" class="draggable drag-drop"> Fire </div>
<div id="act" class="draggable drag-drop"> Collapsed </div>
</div>
I'm just using a button now to try and get it to work. It is supposed to make another selection in the dropdown box which it does, then show the content page. However it isn't changing the display to the page that was created and instead I have to manually click the new selection in the dropdown.
HTML:
<ul class="nav nav-tabs" id="srTabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#upload">Upload</a></li>
<li><a data-toggle="tab" href="#notes">Notes</a></li>
<li class="dropdown">
Submissions <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu" id="submissionContainer">
<li>Grid</li>
</ul>
</li>
<li><a data-toggle="tab" href="#history">History</a></li>
</ul>
<div class="tab-content" id="srContent">
<div id="home" class="tab-pane fade in active">
<div id="navigationBar" class="text-center">
<button onclick="makeSub(150)">Test</button>
</div>
</div>
<div id="search" class="tab-pane fade"></div>
<div id="upload" class="tab-pane fade"></div>
<div id="notes" class="tab-pane fade"></div>
<div id="grid" class="tab-pane fade">
<h1 align="center">Submissions</h1>
</div>
<div id="history" class="tab-pane fade">
</div>
</div>
JavaScript
function makeSub(id) {
$('<li>'+id+'</li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');
}
You either have to bind click event to the button like in this fiddle I made, or move your makeSub function outside of the $.ready function where button's onclick event can find the function.
$.ready(function(){
//everything else
});
function makeSub(id) {
$('<li>'+id+'</li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');
}
Hi I am using the following code to create tabbed layout using twitter bootstrap
<ul class="nav nav-tabs" >
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
now in all tabs i need different page to load.So i want to do this :
<ul class="nav nav-tabs" >
<li class="active">Home</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
update :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>
There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
If not, why not use PHP?
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:
<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>
Then, use jQuery.load to fill in the tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');
Just remove the data-toggle="tab"
for example: on the Home Page:
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>
On the status.html page:
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>
The bad thing is just have some copy of the nav-tab codes