how can I make the tabs responsive by using foundation framework?
I am getting the output like this in the responsive window:
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Tab 1</li>
<li class="tab-title" role="presentational" >Tab 2</li>
<li class="tab-title" role="presentational">Tab 3</li>
<li class="tab-title" role="presentational" >Tab 4</li>
</ul>
<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
<h2>Fourth panel content goes here...</h2>
</section>
</div>
If you may, please provide a link (or publish your work online) for a better response.
Have you read the docs yet?
Zurb Accordion
Zurb Tabs
If you look closer, there is an example on both pages. According to your screenshot, the responsive foundation 5 tabs look exactly how they should. Also, consider doing a web search for "responsive bookmarklet tools" for results that can help a-bit more than Chrome's inspector or FF's Firebug.
Replace your code with this snippet, and along the way, replace with the content you need - one tab at-a-time:
<dl class="tabs" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
</div>
Related
I need to completely destroy Bootstrap tabs. The original markup from Bootstrap docs:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
Desired markup after complete destroy is something like this:
<div>
<ul>
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div>
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
</div>
So the goal is to remove all the Bootstrap classes, listeners, etc. Is there a function/method in Bootstrap 3 for that?
Btw, please I am not looking for "solution" like $.removeClass('.nav, .nav-tabs, .tab-pane','#bla'); & $.removeAttr('role','#bla'); etc.
There is no JS function in Bootstrap 3 that does what you want. Checkout their docs http://getbootstrap.com/javascript/. Are you just trying to remove the attributes from the DOM with client-side JavaScript, or permanently change the HTML on the server?
Either way, it sounds like you will need to write some custom code to accomplish your goal, since it is not something commonly done.
My Bootstrap Tabs are working fine but the URL is built wrong like below. I checked many Sites and mine is definitly wrong.
If I am at http://domain.com/blog it shows me:
http://domain.com/#vote
instead of
http://domain.com/blog/#vote
If the Javascript has loading problems it should still go to the Anchor and not to the URL.
My HTML
<div class="nav nav-tabs" role="tablist">
<a href="#vote" aria-controls="vote" role="tab" data-toggle="tab">
{lang key="Votes" section="global"}
</a>
</div>
<div role="tabpanel" class="tab-pane" id="vote">
Votes
</div>
Javascript
// Tabs
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
If this is all your HTML markup, then you are using an incorrect HTML structure. according to the documentation for javascript bootstrap tabs.
I have tested the following on my own localhost, and your example as well. With the official version there is no issue, while what you have copied above had a broken styling and it did not properly work.
Example
<!-- start container for tabs, required -->
<div role="tabpanel">
<!-- Nav tabs menu, required -->
<ul class="nav nav-tabs" role="tablist">
<!-- repeat the row below for extra menu items, 3x used in example -->
<li role="presentation" class="active">Tab1 title</li>
<li role="presentation">Tab 2 title</li>
<li role="presentation">Tab 3 title</li>
<!-- close tabs menu -->
</ul>
<!-- start tab content panes container. do not forget this, required -->
<div class="tab-content">
<!-- repeating content pane. make sure that the id="xxxx" matches the href from the menu item -->
<div role="tabpanel" class="tab-pane active" id="tab1">tab 1 content</div>
<div role="tabpanel" class="tab-pane" id="tab2">tab 2 content</div>
<div role="tabpanel" class="tab-pane" id="tab3">tab 3 content</div>
<!-- close tab content panes -->
</div>
<!-- close container for tabs -->
</div>
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/
I am using bootstrap and I have a page that is causing me trouble when I use the Tab plugin. The tab body is getting pushed down about 400px below the actual tabs. It is only happening on this one page, most of the other pages are very similar and use the same tab plugin but they are not causing as much problems.
Tab Code:
<ul class="nav nav-tabs">
<li class="active">Entire Asset</li>
<li>Entire Site</li>
<li>Single Service</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="entireAsset">
<p>Hello tab 1</p>
</div><!--End Entire Asset tab-->
<div class="tab-pane" id="entireSite">
<p>Hello tab 2</p>
</div>
<div class="tab-pane" id="singleService">
<p>Hello tab 3</p>
</div>
</div>
jsFiddle: http://jsfiddle.net/f2TG8/
My css and all resources are in the JSFiddle.
There is a problem with the class .nav who has :after and :before styles that creates such white space. You can add this to your css:
.nav {
overflow:hidden;
}
View the demo http://jsfiddle.net/f2TG8/2/
I'm developing a site using latest bootstrap release, and I need some help to figure out how to solve this:
I've nested two tab panes, to be able to manage a lot of information in little space (It´s a very long law and I need to show its articles clearly)
The first tabs divides the main sections, the nested shows in little pieces the articles.
It works fine in the main container.
But I´ll need a navigation tree in the sidebar, and I can´t trigger the nested pane tab if the parent one isn´t already enabled.
I think it could be posible to add some jquery to trigger the parent tab when clicking a direct link to a nested one, but I don´t get it... :(
This is the code (my apoligies, I see it too long):
<!-- Sidebar -->
<div class="bs-sidebar" role="complementary">
<ul id="test">
<li>Title I
<ul>
<li>Sub_Title I</li>
<li>Sub_Title II</li>
</ul>
</li>
<li>Title II</li>
<!-- ... -->
</ul>
</div>
<!-- main container -->
<div role="main">
<h2>Some Title</h2>
<div class="bs-example bs-example-tabs">
<div class="panel panel-default">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="tabs" class="nav nav-tabs">
<li>Title I</li>
<li>Title II</li>
<!-- ... -->
</ul>
</div>
<div class="panel-body parent">
<div id="tabs_parent" class="tab-content">
<div id="test_0" class="tab-pane active fade in">
<p>Instructions</p>
</div>
<div id="test_1" class="tab-pane fade">
<ul>
<li>Sub_Title I</li>
<li>Sub_Title II</li>
</ul>
<div id="tabs_children" class="tab-content">
<div id="test_11" class="tab-pane fade">
<p>Sub-I Lorem ipsum dolor sit amet...</p>
</div>
<div id="test_12" class="tab-pane fade">
<p>SubII - Morbi lectus nibh...</p>
</div>
</div>
</div>
<div id="test_2" class="tab-pane fade">
<p>Morbi lectus nibh...</p>
</div>
<!-- ... -->
I have tested it yet! Just add some jQuery code to make it trigger
First,
Add id for some elements:
<li>Sub_Title I</li>
<li>Sub_Title II</li>
and
<li>Title I</li>
<li>Title II</li>
After, add this javascript code:
$('#id_test_11').on('click',function(e){
$('#id_test_1').click()
});