jQuery tabs: how to hide single tab? - javascript

How do I hide the tab2? I can add ID to the second li and than hide it with jQuery, but isn't there some way to do it through .tabs directly?
<div id="tabs" style="width:100%">
<ul>
<li>
<a href="#tab1">
Tab 1 Title
</a>
</li>
<li>
<a href="#tab2">
Tab 2 Title
</a>
</li>
</ul>
<div id="tab1" style="width:100%;">
content tab1
....

Try this :
$('[href="#tab2"]').closest('li').hide();

Try this:
$($("#tabs").find("li")[1]).hide()

Demo
HTML:
<div id='MyTabSelector'>
<ul>
<li>Tab 0</li>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
Disable Tab 1<br />
JS:
(function ($) {
$.fn.disableTab = function (tabIndex, hide) {
// Get the array of disabled tabs, if any
var disabledTabs = this.tabs("option", "disabled");
if ($.isArray(disabledTabs)) {
var pos = $.inArray(tabIndex, disabledTabs);
if (pos < 0) {
disabledTabs.push(tabIndex);
}
}
else {
disabledTabs = [tabIndex];
}
this.tabs("option", "disabled", disabledTabs);
if (hide === true) {
$(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden');
}
// Enable chaining
return this;
};
$.fn.enableTab = function (tabIndex) {
$(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden');
this.tabs("enable", tabIndex);
return this;
};
})(jQuery);
$('#MyTabSelector').tabs();

you need to hide both li as well as div to hide tab
so your jquery would be
$($("#tabs").find("li")[1]).hide();
$($("#tabs").find('#tab2')).hide();

You could try this:
//when you click a tab
$('#tabs a').click(function(){
//show hidden tabs again
$('#tabs li:hidden').show();
//hide the clicked tab
$(this).parent().hide();
});

Related

Element by class/id click hides all divs, not considering parent id/class

I have the following jquery:
$('#second-panel li.link-panel').on('click', function() {
var showDiv = $(this).children('a').attr('href').split('#');
if ($('div#'+showDiv[1]).css('display') == 'none') {
$('#second-panel').children('div.panel').hide();
$('#second-panel li.link-panel').removeClass('active');
$('div#'+showDiv[1]).slideDown();
$(this).toggleClass('active');
} else {
$(this).toggleClass('active');
$('div#'+showDiv[1]).slideUp();
}
});
$('.fourth-panel li.link-panel').on('click', function() {
var showDiv = $(this).children('a').attr('href').split('#');
console.log($('.fourth-panel').children('div.panel').length);
if ($('div#'+showDiv[1]).css('display') == 'none') {
$('.fourth-panel').children('div.panel').hide();
$('.fourth-panel li.link-panel').removeClass('active');
$('div#'+showDiv[1]).slideDown();
$(this).toggleClass('active');
} else {
$(this).toggleClass('active');
$('div#'+showDiv[1]).slideUp();
}
});
And html:
<div id="second-panel">
<ul class="tabs">
<li class="link-panel active">Tab 1</li>
<li class="link-panel">Tab 2</li>
<li class="link-panel">Tab 3</i></li>
</ul>
<div id="tab1" class="panel show">
<p>hi!</p>
</div>
<div id="tab2" class="panel">
<p>yo!</p>
</div>
<div id="tab3" class="panel">
<p>hi 3</p>
</div>
</div>
<div class="fourth-panel">
<ul class="tabs">
<li class="link-panel active">Tab 4</li>
<li class="link-panel">Tab 5</li>
</ul>
<div id="tab4" class="panel show">
<p>hi!</p>
</div>
<div id="tab5" class="panel">
<p>hi!</p>
</div>
</div>
Ideally, if I click a tab within #second-panel, it will switch content within #second-panel, and if I click a tab within .fourth-panel, it will switch content within .fourth-panel.
Yet, if I click a tab within .fourth-panel div, it hides all the .panel divs in both .fourth-panel as well as #second-panel. Yet, the console.log line says there are only 2 children .panel of .fourth-panel. This only happens the first time I click a tab in either .fourth-panel or #second-panel. Subsequent clicks work as I want them to. What am I missing here?
Is this the output you want try following script code:
<script>
$(document).ready(function () {
$('#second-panel li.link-panel').on('click', function () {
var showDiv = $(this).children('a').attr('href').split('#');
if ($('div#' + showDiv[1]).css('display') == 'none') {
$('#second-panel').children('div.panel').hide();
$('#second-panel li.link-panel').removeClass('active');
$('div#' + showDiv[1]).slideDown();
$(this).toggleClass('active');
} else {
$(this).toggleClass('active');
$('div#' + showDiv[1]).slideUp();
}
});
$('.fourth-panel li.link-panel').on('click', function () {
var showDiv = $(this).children('a').attr('href').split('#');
console.log($('.fourth-panel').children('div.panel').length);
if ($('div#' + showDiv[1]).css('display') == 'none') {
$('.fourth-panel').children('div.panel').hide();
$('.fourth-panel li.link-panel').removeClass('active');
$('div#' + showDiv[1]).slideDown();
$(this).toggleClass('active');
} else {
$(this).toggleClass('active');
$('div#' + showDiv[1]).slideUp();
}
});
});
</script>

slideToggle remove other active classes

I have a simple menu/accordion slider. I want to add the class="active" to the clicked link and slide down to show the UL. When another separate menu item is clicked then the active class should be removed from the previous element and added to the one just clicked. Also if the same is clicked when in active mode then the slider should slide up and remove the active class.
I've tried various configurations of the below but each time have problems getting the active class to be removed if the same is clicked to slide up. Any help is appreciated.
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
Update - have created a quick JSFiddle that demonstrates the problem, apologies for not doing on opening question. You can see that if same item is clicked to toggle the state remains active.
Since you want to support toggling, you should not remove active class from current element so
$(document).ready(function(menuSlide) {
var $as = $('li.menu-item-has-children a').click(function() {
$(this).toggleClass('active').next('ul').slideToggle();
$(this).parent().siblings().children('ul').slideUp();
$(this).parent().siblings().children('.active').removeClass('active');
return false;
});
});
.menu-item-has-children ul {
display: none;
}
a.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
</ul>
We simply store the previous click div in a variable and then slide up that div on click :
var previousElement = 0;
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
previousElement = 0;
}else {
$(this).addClass('active');
if(previousElement != 0) {
$(previousElement).removeClass('active');
$(previousElement).slideUp();
}
previousElement = this;
}
});
Easiest way is,
$(document).ready(function(){
$('li.menu-item-has-children .content').slideUp();
$(document).on('click','li.menu-item-has-children a',function(e){
e.preventDefault();
$this = $(this);
$('li.menu-item-has-children a').removeClass('active');
$this.addClass('active');
$('li.menu-item-has-children a').parent().find('.content').slideUp();
$this.parent().find('.content').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<ul>
<li class="menu-item-has-children">
A
<div class="content">
AAAA AAAA AAAA
</div>
</li>
<li class="menu-item-has-children">
B
<div class="content">
BBBB BBBB BBBB
</div>
</li>
<li class="menu-item-has-children">
C
<div class="content">
CCCC CCCC CCCC
</div>
</li>
</ul>
</html>
In below example, i've worked same link click twice, please let me know if you are requesting this thing or not,
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
console.log($(this).hasClass('active'));
if($(this).hasClass('active') == false)
{
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideDown();
$(this).parent().siblings().children().next().slideUp();
}
return false;
});
});

Issue targeting specific selector jquery in dropdwon menu

I have a drop down menu with jquery and I want to modify some text in different way depending on what is selected in the drop down menu.
The drop down menu works.
Html code:
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
Javascript code:
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this) == '#op1'){
$('#text_to_change').text("text changed");
}
if ($(this) == '#op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
Why does ($(this) == '#op1') not work?
You are trying to compare a jquery object $(this) with a string #op1
To get the id of the element use:
$(this).attr('id');
It will give you the id of the element without the #
Also i think your second if needs to be an else if { ...
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
console.log($(this).attr('id'), $(this).prop('id'));
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this).attr('id') == 'op1'){
$('#text_to_change').text("text changed");
}
else if ($(this).attr('id') == 'op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
This two item must not share the same id 'op2'
<li id="op2">option2</li>
<li id="op2">option3</li>

Dropdown Menu closed when we click all place

I have the following scripts in my dropdown menu:
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
HTML
<div class="menu">
<span>
<ul id="nav">
<li>Produk Teknik <i class='icons icon-right-dir'></i>
<div class="subs">
<div class="wrp3">
<ul>
<li><h3>Manometer</h3>
<ul>
<li><a href='#'>tes</a>
<ul>
<li><a href='#' class='anak'>tes-1</a></li>
</ul>
</li>
<li><br /></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
I need to change that script so that when we click all place, the dropdown menu will automatically be closed. Thank you
You can see my project example http://www.tokobesi.co.id/beta/
I think this is what you meant mate..Try this.. :)
$(document).click(function(e){
if( $(e.target).closest(".menu").length > 0 ) {
return false;
}else{
$("#nav .selected").removeClass("selected");
}
});

when second parent menu is clicked show its submenu and hide the submenu of previously clicked parent menu

I have a vertical menu with submenus and I want to show the submenu only if the parent was clicked ,showing only one submenu at a time. But the thing is when other parent menu is clicked its submenu is shown BUT the previous submenu also is seen. How do i hide the previous submenu?? please help . I am new to javascript.
Here is my html-css-javascript code.
<div class="menu">
<ul >
<li>Contacts
<div style="display: none;" id="cert">
<ul >
<li >Submenu 1</li>
<li>submenu 2</li>
</ul>
</div>
</li>
<li>About
<div style="display: none;" id="defect">
<ul >
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>
</li>
</ul>
script
function Myfunction(obj) {
var ele=document.getElementById(obj).style;
if(ele.display=="none") {
ele.display="block";
} else { ele.display="none"; }
}
The easiest way will be using a global JavaScript variable, although it's not very elegant. Since you're not using any JavaScript libraries like e.g. jQuery everything else will turn into a pile of DOM-traversing spaghetti code.
var openEle = null;
function Myfunction(obj) {
var ele = document.getElementById(obj);
if (openEle != null) {
openEle.style.display = "none");
}
if (ele.style.display == "none") {
openEle = ele;
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<a class="Label">Contacts</a>
<div>
<ul class="Submenu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<a class="Label">About</a>
<div>
<ul class="Submenu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
And :
(function($) {
$(function() {
$('.Label').on('click', function() {
$('.Submenu').hide();
$(this).next().find('.Submenu').show();
});
});
})(jQuery);
That's the jQuery approach. I'll let another couragous guy do it with native js :D
You can use this:
Demo here
var lastid;
function Myfunction(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
I made a new variable to remember the last ID. So you can call it and apply display:none to it.

Categories

Resources