CODEWITHSUNDEEP
jquery
JoaMika
JoaMika

Reputation: 1827

jQuery Hide Divs on toggle

I am using this code to hide and show two separate hidden divs which are triggered by two different buttons

JQUERY

 jQuery("#flip4").click(function(){
    jQuery("#panel4").slideToggle("slow");
  });

 jQuery("#flip6").click(function(){
    jQuery("#panel6").slideToggle("slow");
  });

CSS

#panel4 {padding:30px 20px;background-color:#000;display:none;width:460px;height:175px;margin:8px 0 0 -475px;z-index: 10000;position:absolute;box-shadow: 3px 5px 5px #0D0D0D;border-radius:3px;color:#F1F1F1;}

#panel6 {padding:30px 20px;background-color:#000;display:none;width:420px;height:45px;margin: 0 0 0 418px;z-index: 10000;position:absolute;box-shadow: 3px 5px 5px #0D0D0D;border-radius:3px;color:#F1F1F1;top: 94px;}

HTML

<div id="flip4"><a id="vphone" href="#"></a></div>

<div id="flip6"><a id="vemail" href="#"></a></div>

The problem I have is that I don't want at anytime the two divs to be shown together. i.e. if the flip4 is visible and the user clicks on flip6then jquery needs to hide flip4.

Upvotes: 0

Views: 29

Answers (1)

Bradley4
Bradley4

Reputation: 500

There's a lot of different ways to handle this, depending on the exact functionality you're looking for, you should try one of these two:

 jQuery("#flip4").click(function(){
    jQuery("#panel4").slideToggle("slow");
    jQuery("#panel6").slideUp("slow");
  });

 jQuery("#flip6").click(function(){
    jQuery("#panel4").slideToggle("slow");
    jQuery("#panel6").slideUp("slow");
  });

OR:

 jQuery("#flip4").click(function(){
    jQuery("#panel4").slideToggle("slow",function(){
        jQuery("#panel6").slideUp("slow");
    });
  });

 jQuery("#flip6").click(function(){
    jQuery("#panel4").slideToggle("slow",function(){
        jQuery("#panel6").slideUp("slow");
    });
  });

Upvotes: 1

Related Questions