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()
});
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.
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/
i have 3 tabs place on my website
tab 1| tab 2 | tab 3
i am using jquery for the functionality of these tabs, however it is not working, the page shows only tab 1 details when i click on any other tab it doesn't get loaded
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( ".tabs" ).tabs();
});
</script>
<div class="tabs" ">
<ul>
<li data-tab="tab 1" class="active" ga-action="tab 1 Tab" ga-label="">tab 1</li>
<li data-tab="tab 2" class="" ga-action="tab 2 Tab" ga-label="">tab 2</li>
<li data-tab='tab 3' class=''>tab 3</li>
</ul>
<div id="tab 1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tab 2" class="tab">
<p> Written Material two </p>
</div>
<div id="tab 3" class="tab">
<p> Written Material three </p>
</div>
</div>
Can anyone tell me how can i make the tabs work
There are several errors in the code you've posted:
There's an orphaned double quote " in the top-level div. That's invalid HTML
Your <li>s don't include any buttons/links. The tabs widget expects to have an <a> element within the li, with which to take the user to the corresponding tab
Your content div's id attributes contain spaces. That's invalid HTML.
To fix these change:
<div class="tabs">
...
<li data-tab="tab-1" class="active" ga-action="tab 1 Tab" ga-label="">
tab 1
</li>
...
<div id="tab-1" class="tab active">
...
Here's a working fiddle example: http://jsfiddle.net/9uvmktb8/
That's all the apparent problems, if it's still not working I'd look for the problem in omitted code. Let me know if this isn't the functionality wanted (as the question is a little unclear)
Currently your are not telling your li elements where to go when clicked.
You can try the below code
<div class="tabs">
<ul>
<li class="active">tab 1</li>
<li class="">tab 2</li>
<li class=''>tab 3</li>
</ul>
<div id="tabs-1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tabs-2" class="tab">
<p> Written Material two </p>
</div>
<div id="tabs-3" class="tab">
<p> Written Material three </p>
</div>
</div>
In the above code, with the help of a link we can tell that on click which tab to display.
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 have an application which uses phonegap and jquery mobile and it has tabs like this
<div data-role="header">
<div data-role="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
<div data-role="content">
<div id="tab-1">
<h2>Here is the second tab</h2>
</div>
<div id="tab-2">
<h2>Here is the second tab</h2>
</div>
<div id="tab-3">
<h2>Here is the third tab</h2>
</div>
</div>
Now i need to do the following things
How to add a div dynamically to any of the tab?
How to show progress bar for about 10 seconds and then display the result.
You can dynamically add DOM elements with jQuery like this:
$('#container').append("<div></div>");
For jQuery-Mobile, you'd have to call refresh on any library specific constructs, such as listviews.