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.
Related
I created content area for jquery tabs.With block that contains TAB name and Tab content. The sturcture is like below
<div id="tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active" role="presentation">
<a aria-controls="home" data-toggle="tab" href="#home" role="tab">INTRODUCTION</a>
</li>
<li role="presentation">
<a aria-controls="profile" data-toggle="tab" href="#profile" role="tab">OUR HOLIDAYS TO ITALY</a>
</li>
<li role="presentation">
<a aria-controls="messages" data-toggle="tab" href="#messages" role="tab">ABOUT ITALIAN EXPRESSION</a>
</li>
<li role="presentation">
<a aria-controls="settings" data-toggle="tab" href="#settings" role="tab">ITALY HOLIDAY HIGHLIGHTS</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabgrey">
<div class="tab-pane fade in active country_content" id="home" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="profile" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="messages" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="settings" role="tabpanel">asdsadsad</div>
</div>
</div>
If I try to render this structure through view of a block. I can't emulate it.
Since I have to put all li's inside one ul and all divs inside tab-content.
I would suggest to not render this with #Html.PropertyFor(), not with that markup anyway. Because you would end up with a lot of display templates and helper methods. Create a view model instead where everything is already put together nicely. Then loop through your view model twice, one time for the unordered list and then for every tab pane.
I'm trying to create a simple navbar at the right and pane on the left. Like they have showed in their documentation (section - Tabs on the right).
But the tabs are coming on the top only. Here's the JsFiddle demo
Am i doing anything wrong? Are tabs-right deprecated in new version of bootstrap?
The bootstrap version you are using is Bootstrap v3.3.5.
The documentation you are referring to is Bootstrap v2.0.0.
Use the right version as your code is right.
Snippet
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li class="">Section 2</li>
<li class="">Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="rA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="rB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="rC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/b6zvmfmr/1/
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>
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>
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()
});