Title: hide one div when another is showing in jQuery?
Tags: javascript;jquery;fadein;fadeout
Question: I am trying to hide a div when another one is visible.
I have div 1 and div 2.
If div 2 is showing then div 1 should hide and if div 2 is not showing then div 1 should be visible/unhide.
The function would need to be function/document ready upon page load.
I've tried this but I'm not having any luck, can someone please show me how I can do this.
<script&gt;
window.onLoad(function () {
if ($('.div2').is(":visible")) {
$(".div1").fadeOut(fast);
} else if ($('.div2').is(":hidden")) {
$('.div1').fadeIn(fast);
}
});
</script&gt;


Here is another answer: You should pass a string to the .fadeIn() and .fadeOut() methods.
Instead of .fadeIn(fast) it'll be .fadeIn("fast"). Same for .fadeOut().
And in general since you're already using jQuery it's better to wrap your code like this:
$(function () {
// Code goes here

Here is another answer: Add a class of hidden to each div, then toggle between that class using jQuery. By the way, window.onload is not a function, it expects a string like window.onload = function() {}. Also, put fast in quotations. I don't know if that's required, but that's how jQuery says to do it.
<div class="div1"&gt;</div&gt;
<div class="div2 hidden"&gt;</div&gt;
.hidden { display: none }
$(document).ready(function() {
if($(".div1").hasClass("hidden")) {
$(".div2").fadeIn("fast");
else if($(".div2").hasClass("hidden")) {
$(".div1").fadeIn("fast");

Here is another answer: It looks like you're using jquery selectors (a javascript library). If you're going to use jquery make sure the library is loaded properly by including it in the document header (google makes this easy by hosting it for you <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;</script&gt;)
With jQuery loaded you can do it like this
$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
else if ($('.div2').is(":visible")) {
$('div1').hide();
WORKING EXAMPLE: http://jsfiddle.net/HVDHC/ - just change display:none from div 2 to div 1 and click 'run' to see it alternate.
Comment for this answer: I find jQuery's hosting safer, easier and more reliable `http://code.jquery.com/jquery.min.js` It loads the absolute latest and smallest version. The url's also a lot shorter.
Comment for this answer: Good tip! I've just always used google as I've thought it to be more reliable.

Here is another answer: You can use setTimeout or setInterval to track if these divs exists
$(function() {
var interval = window.setInterval(function() {
if($('#div2').hasClass('showing')) {
$('#div1').fadeOut('fast');
}
if($('#div2').hasClass('hidden')) {
$('#div1').fadeIn('fast');
}, 100);
// when some time u don't want to track it
// window.clearInterval(interval)
for better performance
var div1 = $('#div1')
, div2 = $('#div2')
var interval ....
// same as pre code

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:02/04/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><fadein><fadeout>', 'Title': 'hide one div when another is showing in jQuery?', 'ViewCount': 4186, 'id': 14679564, 'user_AboutMe': None, 'user_AccountId': 2322662.0, 'user_DisplayName': 'Eric Johnson', 'user_Reputation': 1.0, 'user_Views': 3.0, 'user_id': 2037947.0}}