jQuery fade toggle multiple divs - javascript

I'm trying to set up a toggle where when one div is toggled to visible, the other will toggle to hidden. Clicking on "trigger one" toggles div "one" and clicking on "trigger two" toggles div "two". I'm basically looking for a way to make sure that only one of the divs is visible at one time (div one and div two should never both be visible, although both can be hidden).
I'm assuming some kind of if statement but my javascript is not great! Any help would be much appreciated.
HTML:
<a id="trigger-one" href="#">Trigger one</a>
<a id="trigger-two" href="#">Trigger two</a>
<div class="one">Here's one</div>
<div class="two">Here's two</div>
jQuery:
$( document ).ready(function() {
$( "#trigger-one" ).click(function() {
$( ".one" ).fadeToggle( "125", "swing" );
return false;
});
});
$( document ).ready(function() {
$( "#trigger-two" ).click(function() {
$( ".two" ).fadeToggle( "125", "swing" );
return false;
});
});

Here's one way:
$("a").click(function () {
$('div').eq($(this).index()).fadeToggle("125", "swing");
$('div:not(":eq('+$(this).index()+')")').fadeOut()
});
jsFiddle example

Related

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?

addEventListener (show/hide)

I want do a toggle with a button to show and hide a tag(div). So, buttom(toggle) --> to div(show/hide).
window.onload = function(){
var button = document.getElementById('button');
function show(event){
event.target.classList.toggle('hide');
}
button.addEventListener('click', show, false);
}
Because in jQuery is so:
$(document).ready(function(){
$( "#button" ).click(function(){
$( "div" ).toggle( "slow" );
});
});
But in JavaScript?
I do not completely understand your question but I suspect your trouble is with targeting the div which should be hidden or shown.
To do this with jQuery:
HTML
<button class="toggle">Toggle</button>
<div class="text">Hello</div>
Javascript
$(document).ready(function(){
$("button.toggle").click(function(){
$("text").toggle();
});
}

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

disable sortable or dragging with jquery ui

I have a div inside a div that I don't want to be able to drag around as it is a navigation element.
example:
$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});
<div id="container">
<div class="move">drag me around</div>
<div class="nav">Don't move me</div>
</div>
Basically the .nav I don't want to be able to drag I tried this but it didn't work
$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});
Just filter out the item you don't want to be sortable:
$('#container').sortable({
items: 'div:not(.nav)'
});
Your current filter is acting on li elements, you're using div elements.

Categories