We Keep Coding

Jquery Show/Hide multiple divs with transitions

I would like to have a single button show and hide multiple divs. The problem I ran into and haven't been able to construct is a working script that has each div transition during the show/hide and once completed loop back thru the function.
div.bg-1, div.content-1, div.link-1 are visible on page load.
On button.btn click div.bg-1 fades to show div.bg-2, div.content-1 swipes left to show div.content-2 and div.link-1 has no transition but displays div.link-2.
On the next button.btn click div.bg-2 fades to show div.bg-3, div.content-2 swipes left to show div.content-3 and div.link-2 has no transition but displays div.link-3.
Once div.bg-3 is shown on button.btn click it would loop back thru to show div.bg-1
<div class="bg-1 current display"></div>
<div class="bg-2 current"></div>
<div class="bg-3 current"></div>
<div class="content-1 current display"></div>
<div class="content-2 current"></div>
<div class="content-3 current"></div>
<div class="link-1 current display"> </div>
<div class="link-2 current"> </div>
<div class="link-3 current"> </div>
<button class="btn"></button>
I was able to get the divs to show and hide with the script below. However I don't think this is the most efficient and effective way, especially to add the desired different transitions to each element and loop back thru the function.
$(".btn").click(function () {
if ($(".current").next(".display").length) {
$(".current").removeClass("current").next(".display").addClass("current");
}
});
Thank you all in advace! I really appreciate any input and help.

You have to chain your effect and you can use jquery ui effect http://jqueryui.com/effect/. For exemple if you use blind.
$(".btn").click(function () {
$("#div1").show('blind', 1000, function () {
$("#div2").show('blind', 1000, function () {
$("#div3").hide('blind', 1000);
});
});
);
}
In this example, the div1 will show, 1 second later the div2 will show and 1 second later the div3 will hide. You can chain what ever you want whit the effect you want.

Issues with Javascript

I have been developing this website (First Day)
My javascript for the Beliefs section was working previously, then I changed it because the design changed a little. The javascript is the same except I needed to hide some elements when the page loaded. On a click, depending which word is clicked, that description will show up, and the others (if any were already shown) will disappear. The change I made works on my local machine, but doesn't work on my web server. What could be wrong with my javascript?
Here is the edited code; however, it is still not working
Thanks for any help. This is one I cannot figure out.
Here is the link to the zipped folder of the website. Dropbox Zipped Folder
JavaScript Code:
$(document).ready(function(){
$('.Descriptions').hide();
$('#God').click(function () {
$('.Descriptions').hide();
$('#GodDescriptions').show();
});
$('#Jesus').click(function () {
$('.Descriptions').hide();
$('#JesusDescriptions').show();
});
$('#HolySpirit').click(function () {
$('.Descriptions').hide();
$('#HolySpiritDescriptions').show();
});
$('#Bible').click(function () {
$('.Descriptions').hide();
$('#BibleDescriptions').show();
});
$('#Man').click(function () {
$('.Descriptions').hide();
$('#ManDescriptions').show();
});
$('#GodsRelationship').click(function () {
$('.Descriptions').hide();
$('#GodsRelationshipDescriptions').show();
});
$('#Salvation').click(function () {
$('.Descriptions').hide();
$('#SalvationDescriptions').show();
});
$('#SavedWho').click(function () {
$('.Descriptions').hide();
$('#SavedWhoDescriptions').show();
});
$('#Perseverance').click(function () {
$('.Descriptions').hide();
$('#PerseveranceDescriptions').show();
});
$('#GospelOrd').click(function () {
$('.Descriptions').hide();
$('#GospelOrdDescriptions').show();
});
$('#Resurrection').click(function () {
$('.Descriptions').hide();
$('#ResurrectionDescriptions').show();
});
$('#ChurchGov').click(function () {
$('.Descriptions').hide();
$('#ChurchGovDescriptions').show();
});
$('#SecondComing').click(function () {
$('.Descriptions').hide();
$('#SecondComingDescriptions').show();
});
$('#Missions').click(function () {
$('.Descriptions').hide();
$('#MissionsDescriptions').show();
});
});

Don't use IDs for toggling visibility of lots of elements. It's unmaintainable, and misses the point of what IDs are for; they're for a unique property when you need to do targeted work (navigate to them, manipulate a single element, etc).
Give all those bits a class attribute with the same class (or if they already have one, give them all the same class as extra class), and the toggle that single class.
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
and then a simple
$(".line").hide();
to hide everything, with
$(".line").hide();
$("#justthatline").show();
to show individual parts

Use .toggle()
This hides an object if visible and makes viable if hidden.
So in your example set things visible or hidden appropriately and then toggle the ones that should be effected by a click.
Also your comment is an HTML comment and is not valid in the context of JavaScript.
<!--Category Logic-->
should be
//Category Logic
or
/*Category Logic*/
This could be causing your problem.
Edit:
I like what mike said about using classes that would make this a million times easier to deal with and read.
Add class="description" to all you extra text and then you can use toggle to do the rest.
EX.
$(".description").hide();
$("#God").click(function(){
$(".description:not(#GodDescription)").hide();
$('#GodDescription').toggle();
});
This hides everything that isn't the description you want to toggle and then toggles that.

Toggle instead of Just Appearing?

I'm using the code below to display a notice at the top but it just appears out of nowhere. I would like it to scroll down similar to a toggle while pushing down all the content in the div below it down.
Heres the Javascript
<script>
window.onload = function() {
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 10000);
}
</script>
html:
<div id="top">
<p>content here</p>
</div>

Use .slideDown() instead of changing the display property to block
window.onload = function () {
setTimeout(function () {
$('#top').slideDown()
}, 10000);
}

You have this question tagged with jQuery, and there is a straight forward jQuery function for this, so here is that version:
$(function(){
setTimeout(function(){
$('#top').slideDown();
}, 10000);
});
http://api.jquery.com/slideDown/
If you want to do this in plain javascript I would recommend using CSS3 transitions, instead of modifying attributes like display or attempting to perform the animation manually.
An example of this method using CSS3 and max-height, can be found here: http://davidwalsh.name/css-slide
You would then use javascript to add and remove classes to toggle the desired state, the animation would be performed for you by the CSS3 transitions.

Automatic scroll the page to a div after 5 seconds

I'm new in javascript, now I'm trying to do that, as the title, I've a page which has a div at the top that is as big as the page with a video in it, followed by several sections like this:
<div id="first" style="height:100%; width:100%"></div>
<section id="second" style="height:100%; width:100%"></section>
<section id="third" style="height:100%; width:100%"></section>
Now I need 5 seconds after the page is loaded to scroll automatically the page to #second.
I've tried many ways but have failed and haven't found nothing that works properly.
Thanks

I'm feeling generous, so I'll just give you the code this time.
$(window).load(function () {
//normally you'd wait for document.ready, but you'd likely to want to wait
//for images to load in case they reflow the page
$('body').delay(5000) //wait 5 seconds
.animate({
//animate jQuery's custom "scrollTop" style
//grab the value as the offset of #second from the top of the page
'scrollTop': $('#second').offset().top
}, 300); //animate over 300ms, change this to however long you want it to animate for
});

Use this at the end of your codes
setTimeout(function(){window.location.hash = '#second';},5000);
Note that those height:100%; are wrong.

You could use
window.location.hash = '#second';
This will set the focus. I'll leave you to put in some work on a timer solution.
Also, I would discourage any forcing of the user to focus on a particular div. This is not a very good UX practice and can lead to chasing users off your site, especially because they may not understand why the page is scrolling up.

$(function () {
setTimeout(function () { goToSecondTab(); }, 5000);
function goToSecondTab() {
window.location.hash = '#second';
}
});

Add HTML to this line in zzzzBov's script to make it work properly in FF:
$('html, body').delay(5000) //wait 5 seconds

is(:visible) selector not working on class jQuery

Not sure how to explain this, I made a fiddle of what I'm attempting to do:
http://jsfiddle.net/x2btM/9/
here's my code:
HTML:
<div id="ZodOneDragBox">
<div id="aquariusSelectedComp1" class="killSelectedComp1" style="display:none;">
<img src="some.jpg">
</div>
</div>
<div id="ZodTwoDragBox">
<div id="aquariusSelectedComp2" class="killSelectedComp2" style="display:none;">
<img src="some.jpg" width="45" height="45">
</div>
</div>
<div id="aquariusIcnClick" class="iconClicker">
<img src="some_Icon.jpg" width="45" height="45">
</div>
Here's my jquery:
if ($('.killSelectedComp1').is(':visible')) {
//--SELECT BOX TWO
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
});
}
else {
//--SELECT BOX ONE
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
});
}​
Basically when you click on aquariusIcnClick the image aquariusSelectedComp1 will appear in div ZodOneDragBox. aquariusSelectedComp1 with the class of killSelectedComp1 is now visible, so when you click on the icon aquariusIcnClick again, the image should appear in ZodTwoDragBox. It works for the first box, but the selector is not reading that the image with the corresponding class is currently visible therefor executing what's in the if statement and showing the image in the second box. Hope I explained this well enough, once again, here's my fiddle:
http://jsfiddle.net/x2btM/9/
Not sure what I'm doing wrong, I've googled to make sure that I'm using the :visible selector correctly any and all help is very much appreciated. Thank you
​

you don't need bind your click on div condition instead check your div visibility onclick
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else
{
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});
Live Demo
​

Your code is only being executed once when the page loads / or the dom is ready. This means that your if statement is only tested once. You need to modify your code so that the if statement occurs within the click handler. This will mean the visibility of killSelectedComp1 is tested each time the click occurs and you can then make your decision on what to do.
As #rahul has done ;)

Do not bind event condition rather put condition in the event
Live Demo
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});​