Bootstrap Tabbed Nav with Collapsing Categories - javascript

I have been trying to get a tabbed nav system working that allows the user to collapse tabs into category headings. Ideally the categories would automatically close if you select a tab outside of them, and would both look like a selected tab and actually select the first tab in their group when selected.
As of now, I have the nav functioning with the ability to show and hide certain tabs and all of the tabs work, but it is treating the tabs inside of the collapsible group as a different set from those outside it and, as such, does not deselect tabs properly. I was trying to remedy this using javascript, but I haven't figured out a way. Any insights into this would be greatly appreciated.
Link to the code on jsFiddle.
<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="collapse" href="#Tab1">Tab1</a>
</li>
<div id="Tab1" class="collapse in">
<ul class="nav nav-tabs nav-stacked" id="subnav">
<li class="active"><a id="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
<li><a data-toggle="tab" href="#Subtab2">Subtab2</a></li>
<li><a data-toggle="tab" href="#Subtab3">Subtab3</a></li>
</ul>
</div>
<li><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>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active in" 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 class="tab-pane fade" 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>
</div>


I managed to get this working but it required some slight changes in the markup plus some custom jQuery code.
Here's the updated fiddle. Note that the CSS was also updated to accommodate for the markup changes.
Here's the resulting code:
HTML
<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="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse in" id="Tab1">
<li class="active"><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></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>
<li><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>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active in" 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 class="tab-pane fade" 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>
</div>
</div>
jQuery
$('.nav-tabs [data-toggle="collapse"]').on('click', function () {
//Prevent the subnav from collapsing
if ($($(this).attr('href')).hasClass('in')) return false;
//Make collapse links act like tabs
$(this).parent().addClass('active').siblings('li').removeClass('active');
//Activate first subtab
$($(this).attr('href')).find('[data-toggle="tab"]').first().tab('show');
});
$('.nav-tabs > li > a').on('click', function () {
//Hide any open subnav only if it's not the collapse link
//also deactivate any active subtab
if ($(this).data('toggle') != 'collapse') {
$(this).closest('.nav-tabs').find('.collapse.in').collapse('hide').find('.active').removeClass('active');
}
});

Related

Why when tab2 is clicked it appears always the content of the tab1?

I have some tabs using bootstrap 4. In the tab with id "mytabs" I have other two tabs inside it. And in this tabs inside "#mytabs" that is an issue. If I click in the "tab1" link it appears the content of the tab1 but if I click in the "tab2" link it still appears the content of the "tab1".
Do you know where is the issue?
Fiddle with issue: https://jsfiddle.net/cv25swga/8/
HTML:
<body>
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="row mt-3">
<div class="col-12">
<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
<!-- other tab links -->
<li class="disabled">
<a class="nav-link" href="#mytabs" data-toggle="tab" role="tab">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="d-none d-lg-inline-block">Access Data</span>
</a>
</li>
</ul>
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane clearfix fade" id="mytabs" role="tabpanel"
aria-labelledby="contact-tab">
<div class="d-flex mb-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active border" id="tab1" href="#tab1"
data-toggle="tab"
role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link border" id="tab2" href="#tab2"
data-toggle="tab" role="tab">tab2</a>
</li>
</ul>
</div>
<div class="tab-content bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
aria-labelledby="home-tab">
tab1
</div>
<div class="tab-pane fade show clearfix" id="tab2" role="tabpanel"
aria-labelledby="home-tab">
tab2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

This is caused by the fact both your tabs and the links have the same ID.
Change your IDs up so that they are unique on the page and the problem will disappear.

Quick way to navigate between Sub Tab pages using Javascript

Guys I'm right now Stack and upset because I can't get it working...I have an MVC application which works well. Only I have a View Page of Many Main Tabs with Sub Tabs (see picture). My question is that: Is it possible to toggle between sub tabs using JS? If yes, then how?
I have tried the following but it's only toggling the Main Tabs and not the Sub tabs once an action is send.
I tried the following JS:
function Edit(url) {
$.ajax({
type: 'GET',
url: url,
success: function (response) {
$("#userSubSecondTab").html(response);
$('ul.nav.nav-tabs a:eq(1)').html('Edit User Record');
$('ul.nav.nav-tabs a:eq(1)').tab('show');
}
});
}
And Main Page Views:
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#tab1">Main tab 1</a></li>
<li class="active"><a data-toggle="tab" href="#tab2">Main tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Main Tab 3 </a></li>
<li><a data-toggle="tab" href="#tab4">Main Tab 4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in">#Html.Action("ViewMain1")</div>
<div id="tab2" class="tab-pane in active">#Html.Action("ViewMain2")</div>
<div id="tab3" class="tab-pane fade in">#Html.Action("ViewMain3")</div>
<div id="tab4" class="tab-pane fade in">#Html.Action("ViewMain4")</div>
</div>
Now Sub Tab View
<div class="row">
<div class="col-lg-12">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-users"></i> List of Users</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#userSubFirstTab">View All Users</a></li>
<li><a data-toggle="tab" href="#userSubSecondTab">Add New </a></li>
</ul>
<div class="tab-content">
<div id="userSubFirstTab" class="tab-pane fade in active">#Html.Action("ViewUsers")</div>
<div id="userSubSecondTab" class="tab-pane fade in">#Html.Action("AddOrEditUser")</div>
</div>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
</div>
</div>
</div>
</div>
Really I don't know What I am doing wrong? My problem is that when the JS toggle the view, it's changes from the Main Tab View rather than the Sub Tab View (Add User & View User)
How can the JS redirect or toggle the Sub View when ever a Edit button is Click?
I want the view to switch between Add New to View User tab and not from The Main Tab View.
I think It's might be something about the JS but I don't know how to do that.
Please Everyone is welcome with an answer!

nav pills navigation html takes double clicks to change active tab class

<div class="container">
<br>
<ul class="nav nav-pills">
<li class=" active btn-primary "><a data-toggle="pill" href="#home">Ask</a></li>
<li class=" btn-primary "><a data-toggle="pill" href="#menu1">Reviews</a></li>
<li class=" btn-info " ><a data-toggle="pill" href="#menu3">WRITE A REVIEW</a></li>
<li class=" btn-info "><a data-toggle="pill" href="#menu2">ASK A QUESTION</a></li>
</ul>
<br>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
some content tab 1
</div>
<div id="menu1" class="tab-pane fade">
some content tab 2
</div>
<div id="menu2" class="tab-pane fade">
some content tab 3
</div>
<div id="menu3" class="tab-pane fade">
some content tab 4
</div>
</div>
</div>
It takes double clicks on a tab to change the active tab from one to another.... the tab content changes on one click but the active tab is shown as home tab and changes only on second click on same tab.
P.S. I am using angular

try to use data-target instead of href as when you use href your url also changes.. and the url of your current page changes..

Bootstrap 3, Dropdown in Nav Bar not targeting href on click on Internet Explorer

I am having a weird issue with a bootstrap dropdown with a Nav-Bar. Items on the Nav-Bar Target Tabs on the page. I have multiple Nav bar items and then one dropdown Nav item with 3 items within it. On Chrome and Firefox it works perfectly, however on IE, on the dropdown Nav Items it does not target the tab and display the tab.
Any idea what could be causing this?
Here is my code:
<ul id="tabshome" class="nav nav-pills nav-justified">
<li id="tab1" class="active taboutline"><a data-toggle="pill" href="#tabDiv1">Tab1</a></li>
<li id="tab2" class="taboutline"><a data-toggle="pill" href="#tabDiv2">Tab2</a></li>
<li class="dropdown taboutline">
<a class="dropdown-toggle" data-toggle="dropdown">
Drop Down Tab
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li id="dropdowntab1">DropDown Tab 4</li>
<li id="dropdowntab2">DropDown Tab 5</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="tabDiv1" class="tab-pane fade blocks in active ">
<div class="row">
Tab 1
</div>
</div>
<div id="tabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 2
</div>
</div>
<div id="dropdownTabDiv1" class="tab-pane fade blocks">
<div class="row">
Tab 3
</div>
</div>
<div id="dropdownTabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 4
</div>
</div>
</div>
I am using Jquery, and I have made sure that the jquery reference is above the bootstap.min.js reference.

I think it is because of missing ending quote of li id dropdowntab2.

Is there a way to use bootstrap tabs without using a unique identifier

I would like to be able to use bootstrap tabs but without using a unique selector.
I cannot guarantee that the selector is the only one in the dom.
I have many sub templates which are either included in the page as it is rendered or can be loaded inside a modal via ajax.
I do use id's but never in the templates i might use within a modal, some modals are preloaded after the page load event.
<div class="panel">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a data-target=".pane1" data-toggle="tab" aria-expanded="true">pane 1</a></li>
<li><a data-target=".pane2" data-toggle="tab" aria-expanded="true">pane 2</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane pane1">pane 1</div>
<div class="tab-pane pane2">pane 2</div>
</div>
</div>
</div>
I have tried an onclick event on the anchor tag with just jquery which is less than ideal, but cannot get it to work with the .tab('show')
onclick="$(this).closest('.panel')
.find('.tab-pane').hide();$(this).closest('.panel').find('.pane1').show();"

Yes it is possible...for this HTML:
<div class="panel">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li>pane 1</li>
<li>pane 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane">pane 1</div>
<div class="tab-pane">pane 2</div>
</div>
</div>
</div>
This Javascript:
$('.panel .nav-tabs').on('click', 'a', function(e){
var tab = $(this).parent(),
tabIndex = tab.index(),
tabPanel = $(this).closest('.panel'),
tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
tabPanel.find('.active').removeClass('active');
tab.addClass('active');
tabPane.addClass('active');
});
See this functioning bootply
Note Take note that I removed all data attributes from the anchors to prevent bootstraps auto wireup to them**

This solution uses role attributes to control functionality rather than class names, all role are valid ARIA values. http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml. The solution works when nesting "tabpanels".
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel">1</div>
<div role="tabpanel">2</div>
<div role="tabpanel">3</div>
</div>
</div>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel">1</div>
<div role="tabpanel">2</div>
<div role="tabpanel">3</div>
</div>
</div>
javascript
I modified bootstrap tabs "show" method to include this code these lines.
var $context = $this.closest('[role="tabpanel"]');
if($context.length && $target.length != 1){
if($target.length > 1){
$target = $context.find('[role="tabpanel"] ').eq($this.parent().index());
} else {
$target = $context.find(selector).length ? $context.find(selector) : $target;
}
}
Full method.
$.fn.tab.Constructor.prototype.show=function(){var t=this.element,e=t.closest("ul:not(.dropdown-menu)"),a=t.data("target");if(a||(a=t.attr("href"),a=a&&a.replace(/.*(?=#[^\s]*$)/,"")),!t.parent("li").hasClass("active")){var r=e.find(".active:last a"),n=$.Event("hide.bs.tab",{relatedTarget:t[0]}),i=$.Event("show.bs.tab",{relatedTarget:r[0]});if(r.trigger(n),t.trigger(i),!i.isDefaultPrevented()&&!n.isDefaultPrevented()){var l=$(a),s=t.closest('[role="tabpanel"]');s.length&&1!=l.length&&(l=l.length>1?s.find('.tab-pane, [role="tabpanel"] ').eq(t.parent().index()):s.find(a).length?s.find(a):l),this.activate(t.closest("li"),e),this.activate(l,l.parent(),function(){r.trigger({type:"hidden.bs.tab",relatedTarget:t[0]}),t.trigger({type:"shown.bs.tab",relatedTarget:r[0]})})}}};

Categories