jQuery ToggleClass optimisation and features - javascript

I have worked on the below code to control a series of 3 sidebars. As you can see, the code isn't particularly efficient as I've simply repeated the content for each class. I'd like to streamline this if possible to just one function?
I'd also like to add the functionality of only ever allowing one sidebar to be active. So if sidebar .artists is .active and I click sidebar .about, the .artists sidebar will collapse.
Thanks.
JQuery
$(function() {
$( ".artists" ).click(function() {
$( ".sidebar.artists" ).toggleClass( "active" );
});
});
$(function() {
$( ".about" ).click(function() {
$( ".sidebar.about" ).toggleClass( "active" );
});
});
$(function() {
$( ".history" ).click(function() {
$( ".sidebar.history" ).toggleClass( "active" );
});
});
HTML
<nav>
<ul>
<li class="artists"><a>Artists</a></li>
<li>News</li>
<li class="about"><a>About</a></li>
<li class="history"><a>History</a></li>
</ul>
</nav>
<nav class="sidebar artists">
Sidebar Artists content
</nav>
<nav class="sidebar about">
Sidebar About content
</nav>
<nav class="sidebar history">
Sidebar History content
</nav>

You can use this to optimize it:
$(function() {
$( ".sidebar" ).click(function() {
$(this).toggleClass( "active" );
$(".active").toggleClass( "active" );
});
});
As per markup code I would suggest you to add an ID to the main ul as main-nav:
$(function() {
$( "#main-nav li" ).click(function() {
var cls = this.className;
$(this).addClass( "active" )
.siblings("li").removeClass( "active" );
$(".sidebar."+cls).slideToggle()
.siblings(".sidebar").slideUp();
});
});

$('.artists, .about, .history').click(function() {
var subClass = '';
if($(this).hasClass('artists')) {
subClass = 'artists';
} else if($(this).hasClass('about')) {
subClass = 'about';
} else if($(this).hasClass('history')) {
subClass = 'history';
}
$('.sidebar:not(.'+subClass+')').removeClass('active');
$('.sidebar.'+subClass).toggleClass('active');
});
https://jsfiddle.net/aua0wxm9/3/

As you have given the markup, I have changed my code.
Try this:
I have checked this code and it works properly
JS
$(document).ready(function(){
$('ul li').on('click',function(){
$('.sidebar').hide();
$(this).parent().parent().siblings("." +$(this).attr('class')).show();
});
});
Alternatively using active class
$('ul li').on('click',function(){
$('.sidebar').removeClass('active');
$(this).parent().parent().siblings("." +$(this).attr('class')).addClass('active');
});
Here's the fiddle example:
http://jsfiddle.net/5angwsnb/3/
Hope it works well for you too!
Update:
CSS:
.sidebar{
display:none;
}
.active{
//your transition here
}

Related

disable scroll body when menu is open wordpress

My menu in wordpress has the following code:
<nav role='navigation'>
<div id="menuToggle" onclick="lockScroll()" >
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
) );
?>
</ul>
</div>
</nav>
And this jQuery function to disable scroll in body when #menuToggle is clicked:
<script>
jQuery(function(lockScroll) {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
});
</script>
But it always gives me the error
Uncaught TypeError: $ is not a function at
HTMLDocument.
Im not exactly sure what 'open' means in your case. This code should most likely do the right thing or push you in the right direction:
jQuery( '#menuToggle' ).click( function() {
jQuery( 'body' ).addClass( 'lock-scroll' );
} );
jQuery( document ).on( 'mousedown', function( e ) {
var c = jQuery('#menuToggle');
if( !c.is( e.target ) && c.has( e.target ).length === 0 ) {
jQuery( 'body' ).removeClass( 'lock-scroll' );
}
} );
If you click #menuToggle the lock-scroll class is added (first part). As soon as you click outside of #menuToggle it will be removed (second part).
Please Try This:-
jQuery(function(lockScroll) {
if (jQuery('body').hasClass('lock-scroll')) {
jQuery('body').removeClass('lock-scroll');
}
else {
jQuery('body').addClass('lock-scroll');
}
});
This way a can disable the scroll when click
<script>
jQuery('#menuToggle').click( function(){
jQuery( 'body' ).addClass( 'lock-scroll' );
});
</script>
How can i remove class when click again?

Make li item boxes pop out in order jQuery

I have a footer list:
<footer id="footer">
<ul>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xxx</p>
<p> xxxx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx </p>
<p> xx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx</p>
<p> xxx</p>
</li>
</ul>
</footer>
that pops out on click to two separate links, like so:
$(document).ready(function() {
$( "#add" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
$(document).ready(function() {
$( "ul li:eq(3)" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
I would like these ul boxes, after their current popout link is clicked, to either fill with content one after the other in order, or have the boxes themselves pop out one at a time. Input wherever I can do better is helpful as well; I'm a rookie. Bonus: how to have the boxes revert in order when those two links in question are clicked again to close? Thanks all.
edit: the two links that pop out the footer are here, the contact link and the phone image:
<section id="side">
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
</section>
Something like this maybe?
$(document).ready(function() {
var $footer = $("#footer").hide(),
$footerItems = $footer.find("ul li").hide(),
footerState = 0;
$("#add, .sidebar ul li").click(function (e) {
e.preventDefault();
footerState = !footerState;
var method = footerState ? 'show' : 'hide';
if(footerState) $footer.show();
$footerItems.get().reduce(function (p, li) {
return p.then(function() {
return $(li)[method]('slow').promise();
});
}, $.when()).then(function() {
if(!footerState) $footer.hide();
});
});
});
DEMO
https://jsfiddle.net/m173gxvg/3/
Something like this? If yes, here are the modifications:
Remove the display:none from the footer css
Add the display:none to the footer ul li css
Modify the javascript code
Here's the js to use after the click:
toggleTimer=500;
$( "#footer" ).find("ul").find("li").each(function() {
jQuery(this).toggle(toggleTimer);
toggleTimer=toggleTimer+500;
});
I think you want to click on each one and then show the next one, is that right?
Then you can use the .next() jquery property to assign the click listener to toggle the next element.
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(function() {
//if none are visible, show the first one, else hide them all
if ($('#footer').find('li').first().css('display') == 'none' ) {
//show the fist LI
$( "#footer" ).find('li').first().toggle( "fast" );
} else {
//hide them all
$('#footer').find('li').hide();
}
});
//add listener to each LI to toggle the NEXT one
$('#footer').find('li').click(function(){
$(this).next().toggle("fast");
});
});
... after your comment...
OR You can show the FIRST hidden one on each click like this:
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(
function() {
//if NO LI are hidden, hide them all, else show one at a time
if ( $('#footer').find('li:hidden').size()==0 ) {
//hide them all
$('#footer').find('li').hide();
} else {
//show the first hidden LI
$('#footer').find('li:hidden').first().show('fast');
}
}
);
});
Is that what you're looking for?

Carousel - How to loop through elements?

I'm trying to figure out how to loop through each list element one at a time and apply a function to them when they run, I've tried several methods and some hints would help!
HTML structure
<div class="custom-item">
<ul>
<li id="first-slide" class="slide active"><h1>Test</h1></li>
<li id="second-slide" class="slide"><h1>Test</h1></li>
<li id="third-slide" class="slide"><h1>Test</h1></li>
</ul>
</div>
I've worked out an each function that if i understand correctly will handle the changing of classes, this is where I'm failing to loop through each element.
$(document).ready(function() {
$( ".slide" ).each(function( i ) {
if ( this.className !== "active" ) {
this.addClass("active");
} else {
this.removeClass("active");
}
});
});
You need to use $(this).hasClass to check for "active" class.
JSFiddle
http://jsfiddle.net/39o0bagv/
JavaScript
$(document).ready(function() {
$( ".slide" ).each(function( i ) {
if ( $(this).hasClass("active") ) {
$(this).removeClass('active');
$(this).addClass("changed");
} else {
$(this).addClass("active");
}
});
});
CSS
.active {
color: red;
}
.changed {
color: blue;
}
The loop will check if the element has 'active' class and replace it with 'changed'. And vise versa.
I've added a css class so that you can see the active class being toggled. Your methods for checking, adding, and removing the class weren't write, so it was failing with a script error. See what I've done below, using the classList property. However, judging from your post title, I'm not sure if maybe you're wanting to pause on each one and then continue. In that case the javascript setInterval method might be the tool you want. http://www.w3schools.com/jsref/met_win_setinterval.asp
$(document).ready(function() {
$(".custom-item").find('.slide').each(function(){
if (!this.classList.contains("active")) {
this.classList.add("active");
} else {
this.classList.remove("active");
}
});
});
.active{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-item">
<ul>
<li id="first-slide" class="slide active"><h1>Test</h1></li>
<li id="second-slide" class="slide"><h1>Test</h1></li>
<li id="third-slide" class="slide"><h1>Test</h1></li>
</ul>
</div>
Fiddle
Fix: fiddle
$(document).ready(function() {
$('.slide').each(function(i) {
if ( !$(this).hasClass("active")) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
});

Toggle 2 div with one onclick

I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE
You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo
Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.
You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo
Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo
Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo
It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.
see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()
You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});

Categories