CODEWITHSUNDEEP
javascriptjqueryfadeinfadeout
Eric Johnson
Eric Johnson

Reputation: 1

hide one div when another is showing in jQuery?

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>
    window.onLoad(function () {
        if ($('.div2').is(":visible")) {
             $(".div1").fadeOut(fast);

        } else if ($('.div2').is(":hidden")) {
            $('.div1').fadeIn(fast);

        }
    });
</script>

Upvotes: 0

Views: 4216

Answers (4)

KiddKai
KiddKai

Reputation: 21

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

Upvotes: 0

James
James

Reputation: 3273

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"></script>)

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.

Upvotes: 0

ModernDesigner
ModernDesigner

Reputation: 7707

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"></div>
<div class="div2 hidden"></div>

.hidden { display: none }

$(document).ready(function() {

    if($(".div1").hasClass("hidden")) {
        $(".div2").fadeIn("fast");
    }

    else if($(".div2").hasClass("hidden")) {
        $(".div1").fadeIn("fast");
    }

});

Upvotes: 3

Robin van Baalen
Robin van Baalen

Reputation: 3651

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

Upvotes: 0

Related Questions