Develop Reference

JQuery Single Page Fade In/Out Toggle w/Nav

Dudes! Longtime lurker. First question.
Simple page with nav menu triggering fade-in content div. Fade-in on click function, fade-out if toggle-target != href("#"). Script works, but this is a work around. There has to be a simpler method here.
JS:
$(document).ready(function(){
$(".toggle1").click(function(){
$('#div1').delay(500).fadeIn('fast');
$('#div2').fadeOut('slow');
$('#div3').fadeOut('slow');
});
$(".toggle2").click(function(){
$('#div2').delay(500).fadeIn('fast');
$('#div1').fadeOut('slow');
$('#div3').fadeOut('slow');
});
$(".toggle3").click(function(){
$('#div3').delay(500).fadeIn('fast');
$('#div1').fadeOut('slow');
$('#div2').fadeOut('slow');
});
});
HTML:
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a></li>
<li><a class="toggle2" href="#div2">div2</a></li>
<li><a class="toggle3" href="#div3">div3</a></li>
</ul>
</div>
Is there a way to have ONE toggle class function, and if the a href == #div, fade-in? Else, fade-out?
For clarity, I don't want the user to fade-out fadeToggle on second click of the same nav target. Only if a new target is selected, does the current div fade-out.
Thanks, people!

You can use attribute begins with selector, .filter(), .stop(), if condition to check for element opacity before proceeding with animation
$().ready(function() {
$("[class^=toggle]").click(function(e) {
e.preventDefault();
var hash = $("#" + this.href.split(/#/).pop());
if (hash.css("opacity") < 1) {
$("[id^=div]").stop().fadeTo("fast", 0)
.filter(hash).delay(500).fadeTo("slow", 1)
}
})
})
[id^="div"] {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a>
</li>
<li><a class="toggle2" href="#div2">div2</a>
</li>
<li><a class="toggle3" href="#div3">div3</a>
</li>
</ul>
</div>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>

This would be my fade solution. This is not exactly your solution you are looking for but i'm sure you can change it to do what you want the concept is there. You could also set .data on the element to know if that element is already faded.
https://api.jquery.com/jquery.data/
$(document).ready(function(){
$(".toggle1").click(function() {
href = $(this).attr("href");
if(href.includes("#div")) {
$('a[href=#div1]').delay(500).fadeIn('fast');
$('a[href=#div2]').fadeOut('slow');
$('a[href=#div3]').fadeOut('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a></li>
<li><a class="toggle2" href="#div2">div2</a></li>
<li><a class="toggle3" href="#div3">div3</a></li>
</ul>
</div>
<div id="fademe">
testing
</div>

My proposal is:
$(function () {
$('[href^="#div"]').click(function () {
$(this).delay(500).fadeIn('fast');
var siblings = $(this).parent().siblings();
$('[href="' + siblings.eq(0).children('a').attr("href") + '"]').fadeOut('slow', function() {
$('[href="' + siblings.eq(1).children('a').attr("href") + '"]').fadeOut('slow');
});
});
$('#btn').on('click', function(e) {
$('[href^="#div"]').show();
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="nav">
<ul>
<li><a class="toggle1" href="#div1">div1</a></li>
<li><a class="toggle2" href="#div2">div2</a></li>
<li><a class="toggle3" href="#div3">div3</a></li>
</ul>
</div>
<button id="btn">Make visible all elements</button>

How to hide a menu when an item is clicked or hide the menu when someone clicks away

So i want to hide my bootstrap menu on the event when an item is clicked. This is my menu code
<div class="container visible-xs" id="top">
<div class="header-bottom navbar-fixed-top">
<div class="top-nav">
<span class="menu"><img src="images/pic copy.png" alt="toggle"> BESSIT4REAL</span>
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</ul>
</div>
<div class="social-icons">
<ul class="social">
<li><a href="#" ><i> </i> </a></li>
<li></i></li>
<li></i></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<br class="visible-xs">
</div>
and this is my javascript code
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".ul").hide();
});
});
$('')
});
</script>
Basically i need to hide the entire "<ul>" element when the <li> item is clicked,
Currently when someone click on home or about, the menu stays on the screen and does not disappear.

Use the following Jquery Code:
<script>
$(".top-nav li").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$(this).hide();
});
});
</script>

you have an error.. your ul has an ID not a class, so you should us '#' in your jquery.
And to hide your ul you can use either hide() or fadeOut(0)..
$("#ul li a").click(function() {
$("#ul").fadeOut(0);
});
or
$("#ul li a").click(function() {
$(this).fadeOut(0);
});

$(".ul").hide();
references all elements with a class of "ul" You probably want (in your code example) the id referece
$("#ul").hide();
Or if you want all the <ul> elements then give them both the same class (like "hideableUL") then you could go like:
$(".hideableUL").hide();

I did this and it helped.
$("span.menu").click(function(){
$(".top-nav #ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".top-nav #ul").hide();
});
});
$('')
});

Change the css of li and div on click using jQuery

This is my view:
<div class="tabbable">
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-toggle="tab">Upload TOT Master Adhoc</a></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>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3.</p>
</div>
</div>
</div>
The above code which represents the view in tab container format like below:
On changing the tab, I want its corresponding content div should become active and remaining tab would become inactive. I used the below javascript function, but its not working:
jQuery:
$(document).ready(function () {
$("#a1").click(function () {
$("#liTab1").addClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").removeClass('active');
$("#tab1").addClass('tab-pane active');
$("#tab2").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a2").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").addClass('active');
$("#liTab3").removeClass('active');
$("#tab2").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a3").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").addClass('active');
$("#tab3").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab2").addClass('tab-pane inactive');
});
});
How to achieve this?

Twitter-bootstrap-tabs have one more property in html called data-target which when set to its corresponding tab target will automatically do this for you without any help of javascript. Check the below code and DEMO here
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-target="#tab1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-target="#tab2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-target="#tab3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>

You don't have to access the item individually nor you have to add the anchor inside the list. You can just change the pointer using css.
You can change html in this way:
<li id="liTab1" class="active" data-tab="tab1">Upload TOT Master</li>
<li id="liTab2" data-tab="tab2">View TOT Master</li>
<li id="liTab3" data-tab="tab3">Upload TOT Master Adhoc</li>
and this is the js piece of code:
$('ul.nav-tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
$(this).addClass('active');
$("#"+tab_id).addClass('active');
});

Bootstrap shown.bs.tab event not working

I'm using the Flexy template (using bootstrap) and I can't get the shown.bs.tab event on tab to work.
I've managed to make it work on JSFiddle.
Here is the code I use in my template that produce nothing :
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert(e.target.href);
})
});
</script>
What can I miss ? If I copy/paste this code on the Flexy code it doesn't work. What are the steps to understand what is wrong ? Thanks !

Bootstrap tab events are based off the .nav-tabs elements, not the .tab-content elements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1, not the #tab1 content element itself.
So instead of this:
$('#tab1').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Do this instead:
$('[href=#tab1]').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Or, to capture all of them, just do this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
Demo in Stack Snippets
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>

If the Tab is dynamic in anyway try using
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
})

In my case, there was a conflict between Jquery and Bootstrap.
I solved the problem with jQuery.noConflict(). See below!
I hope that helps!
// Issue # tabs toggle
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
});

The issue was more a rails-related one.
I ended up by removing one by one every piece of code since the issue was not there in the raw template as #KyleMit says.
Whenever I remove the line //= require bootstrap-sprockets from my application.js file the issue disappears !
The issue was that I was requiring both bootstrap and bootstrap-sprockets. I should have require just one of them but not both.

The issue I faces was that I had 2 sets of tabs on my page. and I had already bound the 1st tab set with
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
For the 2nd tab set also i had defined the same way.. but I had assigned an id to the ul and bound the click element as:
$('#tabId > li > a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
The 1st tab was working here but the 2nd wouldn't work. I then figured it out and assigned id's to both uls.. now it works

Try this, it's simple and listen to the only Tab you need :
$('a[href="#idTab"]').on('shown.bs.tab', function (e) {
`console.log('this tab is shown');`//or do something else
}

In my case, the bootstrap event 'shown.bs.tab' failed to fire using the above solutions. So, I decided to enable tabbable tabs via javaScript.
const adjustColumnHeaders = () => {
window.setTimeout(() => {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc();
}, 200);
};
const boostrapTabs = $('a[data-bs-toggle="tab"]');
boostrapTabs.click(function () {
$(this).tab("show");
adjustColumnHeaders();
});
$(document).ready(function () {
const tabLink = $(`a[href=${'"' + window.location.hash + '"'}]`);
if(tabLink.length) tabLink.trigger( "click" );
});
Then in your HTML markup, rename data-toggle="tab" to data-bs-toggle="tab".
I.e:
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-employees">
Employees
</a>
</li>

Adding a fadeOut to tabs

I'd like to add a fadeout to the tabs on my page here, if someone could help with the javascript side?
Here's the html:
<ul class="tabs clearfix">
<li class="aboutustab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="maptab"><div class="up"></div>Map</li>
<li class="featurestab"><div class="up"></div>Features</li>
<li class="voucherstab"><div class="up"></div>Offers</li>
</ul>
And the here's the javascript:
$(window).load(function(){
$('.tab:not(.aboutus)').hide();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').hide();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.map').show();
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.vouchers').show();
}
}
});
I have the bootstrap.js plugin from here and would like to use that, if anyone was familiar with that it'd be ideal.
Here's how I would like it to work.
Update: This is what I have now, but the fade effect is different for each tab almost - I like the transition back to the About Us tab which isn't as "heavy" as the transition of the others. The offers tab is leaving remnants of the 'Features' tab content too.
$(window).load(function(){
$('.tab:not(.aboutus)').fadeOut();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').fadeOut();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
newContent.hide();
currentContent.fadeOut(750, function() {
newContent.fadeIn(500);
currentContent.removeClass('current-content');
newContent.addClass('current-content');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.map').fadeIn(500);
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.vouchers').fadeIn(500);
}
}
});

As you are already using jQuery its very simple... you need not go into that manipulation of code. JQuery UI has tabs widget.
http://jqueryui.com/tabs/#default
If you want to load content on Ajax
http://jqueryui.com/tabs/#ajax
Here is complete API..
http://api.jqueryui.com/tabs/#option-hide
DEMO
HTML Changes
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>TAB 1</p>
</div>
<div id="tabs-2">
<p>TAB 2</p>
</div>
<div id="tabs-3">
<p>TAB 3</p>
</div>
</div>
Changed JavaScript
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});
In your code you can do following changes (assuming contents of all div available at page load time )
<div id="tabs">
<ul class="tabs clearfix">
<li class="aboutus tab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="map tab"><div class="up"></div>Map</li>
<li class="features tab"><div class="up"></div>Feature</li>
<li class="vouchers tab"><div class="up"></div><a href="#offers">Offers</li>
</ul>
<div id="about">
<p>about TAB 1</p>
</div>
<div id="map">
<p>MAP TAB 1</p>
</div>
<div id="features">
<p>features TAB 1</p>
</div>
<div id="offers">
<p>offers TAB 1</p>
</div>
</div>
And java script (remember you need to add jquery and jquery ui js and css)
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});

Try this:
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$('.tabs li').removeClass('active');
$(thisAd).children('.tab').fadeOut(250, function(){
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$(this).addClass('active');
});
});
You can change the duration of 250 to whatever you want. All I'm doing is fading out the tab that is currently open before showing the new one in the fadeOut() callback.