I am using spry tabbed panel in dreamweaver. I am using the tabs as steps, for instance when the user completes the process in tab 1 and click complete button, tab 2 will open. Everything works fine till this step.
Now I want to disable the tabs, for instance when the user is present in tab 1 I want the future tabs (tab 2,3&4) to be disabled. Please tell me how to do this.
I did a lot of research but all I could find is jquery tabs, I can't find solution for spry tabbed panels.
Thanks!
Edit.............
The result doesn't exactly shows a tab panel. But I hope it is enough to view the coding.
http://jsfiddle.net/AU9D9/
Edit............ Found the Answer:
In
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
</ul>
In
<script type="text/javascript">
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
</script>
In JS:
TabbedPanels1.showPanel(1);
$('.TabbedPanelsTabGroup').children().hide().eq(1).show();
just modify the area that i change
HTML
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" id="tab1">Tab 1</li>
<li class="TabbedPanelsTab" id="tab2">Tab 2</li>
<li class="TabbedPanelsTab" id="tab3">Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
<input type="submit" value="complete" class="complete">
</div>
JS CODE
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
Found the Answer:
In
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
</ul>
In
<script type="text/javascript">
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
</script>
In JS:
TabbedPanels1.showPanel(1);
$('.TabbedPanelsTabGroup').children().hide().eq(1).show();
Related
I am trying to implement two basic tabs and panels. The panel does not show the content(Page 1) on page load. However, clicking on the other tab works fine with the right content(Page 2) and then going back to the first tab works fine(Page 1).
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane">
Page 1
</div>
<div id="panel2" class="tab-pane">
Page 2
</div>
</div>
Is there something I am missing?
You don't have the active class for the content panel.
You need the following to show the panel1 content by default:
<div id="panel1" class="tab-pane show active">...
I think we need more details because your code is working fine
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane show active">
This is the content of page1............................
</div>
<div id="panel2" class="tab-pane">
This is the content of page2............................
</div>
</div>
I'm running Bootstrap 3 with links in my navbar to Bootstrap tabs on the 'Category' page, like so:
<li>Tab1</li>
<li>Tab2</li>
On my 'category' page, here's the code I have for my tabs:
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</div>
</div>
How would I use either html or jquery/javascript so that if people click on either link in the navbar, whether it's from a different page OR from the 'category' page already to go to that page with that tab open?
I am not looking to have the link open in another window or tab, but rather the same window/tab the user is currently on. (I've already tried this solution by placing target="_blank" into the links in the navbar and adding $('#myTabs a[href="' + window.location.hash + '"]').tab('show'); as the javascript. This was not my preferred solution.
Any advice/solutions you might have to offer?
I think this is what you are looking for.
It doesn't account for a variable amount of tabs, but it does the job for 2 tabs.
$(document).ready(function(){
$tab1 = $('#tab1');
$tab2 = $('#tab2');
$tablink1 = $('#link_tab1');
$tablink2 = $('#link_tab2');
$('#link_tab1 a').on('click', function(){
$tablink1.addClass("active");
$tab1.addClass("active");
$tab2.removeClass("active");
$tablink2.removeClass("active");
});
$('#link_tab2 a').on('click', function(){
$tablink2.addClass("active");
$tab2.addClass("active");
$tab1.removeClass("active");
$tablink1.removeClass("active");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTabs">
<li id="link_tab1" class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li id="link_tab2"><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade in">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</div>
</div>
I wonder whether it is possible to write Bootstrap tabs without using anchor elements <a>?
The reason I want to know is that I want to add elements inside the tab that are not valid children of <a> - in my case I want to add an <input> (note the <input> is not used to control the tabs, as such).
An archetype tab example may be:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
I know I can make tabs show programmatically using:
$('#tab1').tab('show')
But that appears to depend on the fact that it's an <a>. Could I use a <div>, for example, and hook into the click event with JQuery?
I would need some way to specify the href if I were to do it that way.
You can use any other element. Instead of href attribute, use data-target.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><span data-target="#tab1" data-toggle="tab">Section 1</span ></li>
<li> <span data-target="#tab2" data-toggle="tab">Section 2</span ></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
No need for custom javascript, but you need to style. Example in jsfiddle.
I think you can do something like this
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active"> <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""></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>
<div id="clickdiv" style="background-color: red;width: 20px;height: 20px"></div>
<script type="text/javascript">
$("#clickdiv").click(function(){
// $('#myTabs a:first').tab('show') // Select first tab
// $('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
});
</script>
You can use data-target on the inputs..
<input data-target="#..." data-toggle="tab" class="form-control">
Demo: http://www.codeply.com/go/mXUpU5b2x0
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.
I am using a Spry tabbed panel for an HTML base site.
I want to open fancybox, by clicking on a tab (four tabs in total). Once the user fills the fancybox form, only that particular tab panel content should be open.
Is this possible?
Below is my code.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
I want to a form to be filled on tab #2 in fancy box. Once user fill that form and submit successfully after that only tab panel content should be opened.
As you have not posted any code ..I can tell only logic .. U can get the selectedtab index by
var index= ($tabs.tabs('option', 'selected'));
and then you compare your index with the fetched index and if it matches then open your fancybox by
$(".fancy").fancybox().trigger('click');
and you can write your own function on sumbit/close of fancybox
$("<YOUR-SELECTOR>").fancybox({
onClosed: function() {
// your own functions
});
});