In order to present a lot of information to user in concise manner using togglebar is second to none which gives user the flexibility to switch content between visibility and invisibility. If you have been following the first toggle bar which you can check on this link, this post is modified and extended on that by adding two layered tabbed content inside that sidebar togglebar.
For the illustration, I will be discussing how to make this two layered tabbed content using html and JS part only. I will be also providing demo link which you can always visit and check the underlying css.
Step 1 Html:
Following is the example html code<!-- navigational part --> <div class="topTab btn-group nav nav-pills nav-pills-custom" data-toggle="btn1" > <a class="btn active" id="toyota">Toyota</a> <a class="btn" id="bmw" >BMW</a> <a class="btn" id="tesla" >Tesla</a> </div> <div id="toyotaInfo" class="topTab btn-group nav nav-pills nav-pills-custom" data-toggle="btns1" role="tablist" > <a class="btn active" href="#toyota1st" data-toggle="pill">Toyota 1</a> <a class="btn" href="#toyota2nd" data-toggle="pill">Toyota 2</a> <a class="btn" href="#toyota3rd" data-toggle="pill">Toyota 3</a> </div> <!-- content part --> <div class="tab-content toyotaContent"> <div id="toyota1st" class="tab-pane active"> <div class="ml-3"> <h3>Toyota 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div id="toyota2nd" class="tab-pane fade"> <div class="ml-3"> <h3>Toyota 2</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div id="toyota3rd" class="tab-pane fade"> <div class="ml-3"> <h3>Toyota 3</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> </div>
In the above, basically at the core, bootstrap 4 tab is used for this example and it has two components. One is the navigational element and the other being the content element which switches between visibility and invisibility.
Since its two layered tabbed content, this BS 4 tabs is followed by first layer of tabs which are not BS 4 tab itself but will behave like that with the help of jQuery for the navigational part.In regard to content part, a class name 'toyotaContent' is given so that it can be selected later also with jQuery. You can also see that data-toggle="btn1" and data-toggle="btns1" html attributes are added as well so that the inside buttons can be selected with jQuery.
For initial setup, active class is added in both navigational and content elements so that the first link and content becomes visible and other elements are going to be invisible.
Step 2 JS:
Take a look at example code first
const showHideTabs = ( tabId, tabs ) => { let showTabPos = tabs.indexOf(tabId); // showing selected tab $('#'+tabId+'Info').show(); $('.'+tabId+'Content').show(); // hinding other than shown tabs let hideTabs = tabs.filter(function(e) { return e !== tabId }); for (let i = 0; i < hideTabs.length; i++){ $('#'+hideTabs[i]+'Info').hide(); $('.'+hideTabs[i]+'Content').hide(); } } let tabs = ['toyota','bmw','tesla']; // intial show control showHideTabs('toyota',tabs); $('[data-toggle="btn1"] .btn').on('click', function(){ let $this = $(this); // switching active among 1st layer of tabs $this.parent().find('.active').removeClass('active'); $this.addClass('active'); // switching among 2nd layer of tabs showHideTabs( $this.attr('id'), tabs); });
As you can see In the above, there are two sections of code.
One is the click event happening on the first layer of navigational links and secondly, manipulation of content element to either visible or invisible with that click event.
Notice, inside the function showHide there are two sections again.
One is showing the clicked link and content and the other is hiding the rest the links and contents.
If you follow more closely, I have used javascript filter function on arrays which are all the existing tabs to detect the rest of the tabs needs to be hidden based on clicked tab.
So, there you go, it is bit tricky at first but when you look at the code it feels easy.
Lastly, you can view this layered tabbed content in action in this following demo url. In this demo url, you will see the example in more illustrated than it is given in the post.
http://demo.mahfoozurrahman.com/togglebar2/
Now, you can enjoy implementing the layered tabbed content in no time and also giving user flexibility in their page so that they can show/hide information based on their need.