Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Checking if a div toggle on or off?

    Hey people, I'm having some issues with this script - well I say an issue, I just can't really get my head around how to do this!

    Basically, I have this code which allows me to toggle the display attribute of two divs when clicking on a specific link as below...

    Code:
    $(document).ready(function(){  $(".homelink").click(function(){
        $("#subnavhome").toggle();
      });
      $(".guideslink").click(function(){
        $("#subnavguides").toggle();
      });
    });
    But, I was wondering how I would be able to make the script check if one div is being shown, and if so then hide it before showing the other and vice versa.

    I'm not sure how to do this as I am fairly new to Javascript.

    Any help given is extremely appreciated and I'd be very grateful!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Use the :visible selector in combination with the is() function. Something like:
    Code:
    if($(…).is(':visible')) {…}

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Use the :visible selector in combination with the is() function. Something like:
    Code:
    if($(…).is(':visible')) {…}
    I have come up with this, made entirely by myself but I think I'm over complicating it - it doesn't seem to work at all.

    Code:
    $(document).ready(function(){
      $(".homelink").click(function(){
    	  if(("#subnavguides").is(':visisble'))
    	  {
    		  $("#subnavguides").toggle();
    		  $("#subnavhome").toggle();
    	  }else{
    		  $("#subnavhome").toggle();
    	  }
      });
      $(".guideslink").click(function(){
          if(("#subnavhome").is(':visisble'))
    	  {
    		  $("#subnavhome").toggle();
    		  $("#subnavguides").toggle();
    	  }else{
    		  $("#subnavguides").toggle();
    	  }
      });
    });
    Apologies for coming across stupid if this is a extremely easy fix!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •