JQuery Single Page Fade In/Out Toggle w/Nav - javascript

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>

Related

How to show one div at a time with least lines of code?

I am trying to show only one div at a time once a link is clicked. My codepen I was working on is here if someone could take a look. I'm trying to use jQuery so that when an element inside a list item is clicked it toggles that div item to display ONLY until another item is clicked which hides the previous item.
$( "#home_div" ).hide();
$( "#about_div" ).hide();
$( "#home" ).click(function() {
$('#home_div').toggle();
});
$( "#about" ).click(function() {
$('#about_div').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
</head>
<body>
<header class="header">
<ul class="main-nav">
<li id="home">Home</li>
<li><a id="about" href="#">About</a></li>
<li><a id ="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
<div id="home_div"></div>
<div id="about_div"></div>
<div id="portfolio_div"></div>
<div id="contact_div"></div>
</header>
</body>
To make this work in a generic manner (and therefore keep the JS as short as possible) you can place the id of the target content within the href property of the a elements. Then you can simply toggle() the target div whilst hiding its siblings, like this:
$('.main-nav a').click(function(e) {
e.preventDefault();
$($(this).attr('href')).toggle().siblings().hide();
});
#content-container div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div id="content-container">
<div id="home_div">Home</div>
<div id="about_div">About</div>
<div id="portfolio_div">Portfolio</div>
<div id="contact_div">Contact</div>
</div>
Give all the content a common class. Then use the id of the nav link to create selector for the content to show
$('.main-nav a').click(function(e) {
e.preventDefault();
// hide all content class and filter the matching id to show
$('.content').hide().filter('#' + this.id + '_div').show();
});
.content {
display: none
}
.content:first-of-type {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
</head>
<body>
<header class="header">
<ul class="main-nav">
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About</a></li>
<li><a id="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
<div class="content" id="home_div">home_div</div>
<div class="content" id="about_div">about_div</div>
<div class="content" id="portfolio_div"></div>
<div class="content" id="contact_div">portfolio_div</div>
</header>
</body>
How about zero javascript? You could change the menu to be labels that tie to radio buttons that control which div shows. The CSS only shows the div immediately after the radio button that is currently selected, modifiable by clicking any of the menu labels.
[name=mainNavState] { display: none; }
[name=mainNavState] + div { display: none; }
[name=mainNavState]:checked + div { display: inherit; }
<ul class="main-nav">
<li id="home"><label for="homeState">Home</label></li>
<li><label for="aboutState">About</label></li>
<li><label for="portfolioState">Portfolio</label></li>
<li><label for="contactState">Contact</label></li>
</ul>
<input type="radio" name="mainNavState" id="homeState" checked>
<div id="home_div"> My Home Stuff </div>
<input type="radio" name="mainNavState" id="aboutState">
<div id="about_div"> My About Stuff </div>
<input type="radio" name="mainNavState" id="portfolioState">
<div id="portfolio_div"> My Portfolio Stuff </div>
<input type="radio" name="mainNavState" id="contactState">
<div id="contact_div"> My Contact Stuff </div>

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');
});

jQuery - using the same function (ToggleNav/Dropdown) on multiple ID's

I'm trying to make multiple dropdown menu's on my website and I am using this jQuery for this:
$(function() {
var pull = $('#pull');
menu = $('#nav');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Here's the html part:
<nav class="container">
<a href="#" id="pull" style="display:block;">
<h3>Menu</h3>
</a>
<ul id="nav" style="display:none;">
<li>Pizza</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
It works wonderful if I only have one drop down menu but as soon as I add another one, only one of them (doesn't matter if it's two, three or more then) is actually dropping down.
I gave every Menu it's own ID and copied the code every time and replaced the ID's but this doesn't work.
Already looked into this (using the same function of different events ) or this (Jquery - use the same function for multiple requests) and other threads but i can't figure out how to apply this on my code...
Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/
Use classes instead of ids, and then you can make the same code work for all cases (fiddle):
$(function () {
var pull = $('.pull');
$(pull).on('click', function (e) {
e.preventDefault();
var menu = $(this).next();
menu.slideToggle();
});
});
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
Try this:
https://jsfiddle.net/thwdyccr/5/
Rather than using IDs - consider using a class instead - this'll save you lots of duplication in your code (as essentially it's all doing the same thing).
You can specify the target selector (e.g. the element you want to show) by traversing your structure with .parent() .children() or .find()
If you're wondering why I am storing $(this) in var element - it is because the browser has to figure out what $(this) is each time you use it - so it's good practice to store it in a variable.
HTML
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Bear</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Fish</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
JS
$(function() {
$(".pull").click(function(e) {
e.preventDefault();
var element = $(this);
element.parent('nav.container').children("ul.nav").slideToggle();
});
});
You shouldn't use id's for pull. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/.
Try utilizing Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling to select next ul to call .slideToggle() on
$(function() {
var pull = $("[id^=pull]")
, menu = $("[id^=nav]")
, menuHeight = menu.height();
pull.on("click", function(e) {
e.preventDefault();
$(e.target.parentElement.nextElementSibling).slideToggle();
});
});
jsfiddle https://jsfiddle.net/wpvok7gy/1/

Show the content based on link click. And hide previously selected

I want to show the content based on link click. and hide the content which was previously selected.
Any way to do it?
Note : I dont want to change the markup.
Here is jsFiddle
html:
<ul class="nav nav-stacked" id="nav-stacked">
<li class="active"><i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li id="vollist-container" class="menu open"><i class="fa fa-sort-alpha-asc fa-fw"></i>Volumes<i class="caret"></i>
<ul id="vol-list" class="submenu">
<li> <a href="javascript:void(0);" onclick="show_content('vol1', this)">
<span>vol1</span>
</a>
</li>
<li> <a href="javascript:void(0);" onclick="show_content('vol2', this)">
<span>vol2</span>
</a>
</li>
</ul>
</li>
</ul>
<div id="content">
<div id="dashboard" class='show'>dashboard</div>
<div id="volumes">
<div id="vol1" class="hide">vol 1</div>
<div id="vol2" class="hide">vol 2</div>
</div>
</div>
jQuery:
function show_content(id, element) {
var children = $("#content").children();
children.filter(function () {
return $(this).css('display') == 'block';
}).hide();
$("#" + id).parent().css('display') == 'none' ? $("#" + id).parent().show() : null;
$("#" + id).toggleClass('hide');
}
This function does what you need:
function show_content(id, element) {
$('#content > div').hide();
$('#' + id).show();
}
Notes:
You do not need the .show and .hide CSS classes
You still need to hide all the content divs on page load either via CSS or via jQuery.
The element parameter is not necessary.
jQuery offers more elegant ways to solve this problem, but the function above should answer your question.
<script>
function showSomething()
{
$("#div1").hide();
$("#div2").show();
</script>
Around your div:
<a href="Javascript:showSomething();">
<div></div>
</a>

Adding a fade effect to CSS/JS tabs

Hey guys, I got this JS code and want to add a slight fade effect when switching tabs, so it looks a little bit smoother.
<script type="text/javascript">
$(document).ready(function(){
initTabs();
});
function initTabs() {
$('#tabMenu a').bind('click',function(e) {
e.preventDefault();
var thref = $(this).attr("href").replace(/#/, '');
$('#tabMenu a').removeClass('active');
$(this).addClass('active');
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
});
}
And this is the corresponding HTML:
<ul id="tabMenu">
<li><a id="tab_1" class="active" href="#1">Tab 1</a></li>
<li><a id="tab_2" class="" href="#2">Tab 2</a></li>
</ul>
<div id="tabContent">
<div id="1" class="content active"></div>
<div id="2" class="content"></div>
</div>
Look at the FadeIn and FadeOut methods.
Using them is fairly straightforward:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
Try this:
replace:
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
by:
$('#tabContent div.content[id!='+thref+']').fadeOut('slow', function(){
$('#'+thref).fadeIn('slow');
});

Categories

Resources