i'm trying to create a button or link that opens a specific accordion tab, here is my accordion structure:
<div class="tabs">
<div class="tabs-header">
<div class="border"></div>
<ul>
<li class="active">Home</li>
LINK HERE to open Tab 2
LINK HERE to open Tab 3
<li>Symptom Checker</li>
<li>Locator</li>
</ul>
</div>
<div class="tabs-content">
<div tab-id="1" class="tab active"></div>
<div tab-id="2" class="tab"></div>
<div tab-id="3" class="tab"></div>
</div>
I'm guessing there will be a onclick event I can apply to a button? i've tried:
Symptom Checker
but nothing happens other than updating the URL
you can use
$('your_button').on('click',function(){
$( "#accordion" ).accordion( "option", "active", 1 );
});
for tab2 and
$('your_button').on('click',$( "#accordion" ).accordion( "option", "active", 2 );})
for tab3
or you can use onclick property
<a onclick="$( '#accordion' ).accordion( 'option', 'active', 1 )">Click here for tab2</a>
See a working demo here.
source http://api.jqueryui.com/accordion/#option-active
Related
I have an issue with triggering the click event of one of the elements, i added to my Jquery tab. As you know, when one of the links in a Jquery tab is clicked, it changes the content of a specified div to the contents of the div with an id specified in the '<a> </a>' of one of the Jquery tab elements (in this case the one that has just been clicked)..
What I want to do is trigger the click event on this element (i.e the Jquery tab group element that has just been clicked) when i click another element in my document (i.e the element with the id #viewClassesNavBtn).
-------This the call back function code snippet ------
$(document).ready(function(){
$("#viewClassesNavBtn").click(function(){
<!-- $("#dasCBtn").click();-->
document.getElementById('dasCBtn').click();
});
});
------This is the jquery tab ui section------
<ul id="tabs_ul" style="background-color:transparent; border:none;">
<li class="dashBBtn" id="dasBtn">Dash Board</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasCBtn">Classes</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasPBtn">Profile</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasBStn"> Settings</li>
</ul>
When I click the element with id #viewClassNavBtn, I expect it to simulate the tab switching event of the JQuery UI but it doesn't. I get the feeling it is not possible, but I am inexperienced with JQuery UI tabs and stuff, so if it is possible, please help.
jQuery UI is not attaching the click event to the li items, it's attaching it to the link. Simply move the id tags onto the link and problem solved. Included a function to simulate a mouse click instead of relying on the technically obsolete .click() method (which doesn't seem to show any signs of going away)
function clickTab(tab) {
let click = new MouseEvent('click', {
bubbles: true,
cancelable: true,
synthetic: true,
view: window
});
tab.dispatchEvent(click);
}
$( function() {
$( "#tabs" ).tabs();
$(".navBtn").click(function() {
let tab = document.getElementById(this.dataset.for);
if (document.getElementById("simulate").checked) {
clickTab(tab);
} else {
tab.click();
}
});
});
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li class="dashBBtn"><a id="dasCBtn" href="#tabs-1">Nunc tincidunt</a></li>
<li class="dashBBtn"><a id="dasPBtn" href="#tabs-2">Proin dolor</a></li>
<li class="dashBBtn"><a id="dasBStn" href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Stuff in the C tab</p>
</div>
<div id="tabs-2">
<p>Stuff in the P tab</p>
</div>
<div id="tabs-3">
<p>Stuff in the S tab</p>
</div>
</div>
<div>
<button class="navBtn" type="button" data-for="dasCBtn">C</button>
<button class="navBtn" type="button" data-for="dasPBtn">P</button>
<button class="navBtn" type="button" data-for="dasBStn">S</button>
<input id="simulate" type="checkbox" checked>
</div>
</body>
I am using jQuery mobile (not jQuery UI). What I would like to do is to change active tab without triggering click.
HTML
<div data-role="page" id="settingsPage">
<div data-role="content">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a id="tab0" href="#one" class="ui-btn-active">Tab One</a></li>
<li><a id="tab1" href="#two">Tab Two</a></li>
<li><a id="tab2" href="#three">Tab Three</a></li>
</ul>
</div>
<div id="one" style="display: none" class="ui-body-d ui-content">Tab One content</div>
<div id="two" style="display: none" class="ui-body-d ui-content">Tab Two content</div>
<div id="three" style="display: none" class="ui-body-d ui-content">Tab Three content</div>
</div>
</div>
JS
var tabIndex = 0;
setInterval(function(){
tabIndex++;
if (tabIndex >= 3)
tabIndex = 0;
else if (tabIndex < 0)
tabIndex = 2;
$("#tabs").tabs( "option", "active", tabIndex );
}, 3000);
DEMO
What happens is the tab content is switching, but the active tab doesn't. How can I switch both, without initiating click event and leveraging jQuery Mobile/UI as much as possible?
You can use addClass and removeClass for ui-btn-active class on $("#tab" + tabIndex). Use removeClass before incrementing tabIndex and addClass after incrementing.
Here's the jsfiddle.
UPDATE
You can show the content in the tab based on the tabIndex by using a switch statement. Hide all tab content before tabIndex is incremented then based on tabIndex show tab content.
Here's the new jsfiddle.
UPDATE 2
Thanks to Omar, you can remove and add the ui-btn-class on the tabsactivate event. I've updated the original fiddle with what Omar has in the comments. This is the newest jsfiddle.
Here's the tabsactivate event that you need to add to your code:
$("#tabs").on("tabsactivate", function(e, ui) {
ui.oldTab.find("a").removeClass("ui-btn-active");
ui.newTab.find("a").addClass("ui-btn-active").focus();
});
Why don't you simulate the click?
$("#tab"+tabIndex).click();
instead of
$("#tabs").tabs( "option", "active", tabIndex );
I am having trouble with removing a class from an element when a separate div is closed.
You can see from my code below and my Fiddle
I have a jquery tabbed menu going that starts off with nothing open by default. When you click on a tab, the content is opened and the tab is highlighted. However if you click that same tab again and close the content the tab remains highlighted.
I have tried removeClass but with no success.
JS
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).slideToggle();
});
});
HTML
<div id="tabs-container">
<div class="tabs-menu">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
<div class="tab">
<div id="tab-1" class="tab-content">
Hello
</div>
<div id="tab-2" class="tab-content">
Number Two
</div>
<div id="tab-3" class="tab-content">
Tab 3
</div>
<div id="tab-4" class="tab-content">
Bye
</div>
</div>
</div>
Use the toggleClass function to add/remove the class
$(this).parent().toggleClass("current");
demo:http://jsfiddle.net/Us8uc/6747/
I was just wondering how I would go about making something toggle on and off in jQuery. What I want to do is have the download dropdown menu toggle when somebody clicks on "download" The class works with the hover effect, but won't work for the click effect for some reason! Any help would be awesome!
JSFiddle: https://jsfiddle.net/830f119e/1/
<div class="navigation">
<div class="nav">
<div class="logo">
ZeteticRSPS
</div>
<ul>
<li>Forum</li>
<li>Store</li>
<li class="download-dropdown">
Download<i class="fa fa-caret-right nav-icon" aria-hidden="true"></i>
<div class="dropdown-content">
Mediafire
Direct Download
</div>
</li>
<li>Vote</li>
</ul>
</div>
jQuery:
$( "download-dropdown" ).click(function() {
$( this ).toggleClass( "download-dropdown-toggle" );
});
Try following code.
$( ".download-dropdown a" ).click(function() {
$( this ).parent().find('.dropdown-content').slideToggle();
});
Working Fiddle.
You haven't chosen jQuery in JSFiddle.
I have a working jQuery UI tabs, the structure is similarly like this:
<script>
$( "#tabs" ).tabs();
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
<!-- content of tab 1 -->
</div>
<div id="tabs-2">
<!-- content of tab 2 -->
</div>
</div>
<div id="extra">
<!-- some contents here -->
</div>
Now, I wanted to hide the div extra when Tab 2 is selected, while showing it when Tab 1 is selected. I can't quite understand the event thing on jQuery UI tabs.
The the activate event
$("#tabs").tabs({
activate: function (e, ui) {
$('#extra').toggle(ui.newPanel.is('#tabs-1'))
}
});
Demo: Fiddle
Here you go: http://jsfiddle.net/cfnFk/
See fiddle for everything but below is the js code...
$( "#tabs" ).tabs({
activate: function( event, ui ) {
alert(ui.newTab.index()); //tabs are a zero-based index, so Tab 1 = 0, Tab 2 = 1
if(ui.newTab.index()===1) $( "#extra" ).hide();
else $( "#extra" ).show();
}
});
This is assuming you are using jQuery UI version 1.9 or later. If not, read this https://stackoverflow.com/a/300221/3112803