How to display and hide 2 div with jquery using if statement?

Question

I have a simple 2 div with contents and 2 buttons:

<div id="div1"></div>
<div id="div2"></div>

<i class="button1"></i>
<i class="button2"></i>

$(".button1").click(function() {
  $("#div1").fadeToggle();
  $(".button1").toggleClass("active");
});

$(".button2").click(function() {
  $("#div2").fadeToggle();
  $(".button2").toggleClass("active");
});

What i want to achieve is that if div1 is already on and if i press button2, div1 needs to go Off, div2 needs to go On and button1 needs to remove class .active and button2 needs to get class .active and vice versa!

It is very important that the display/hide is done with fadeIn/Out animation!

Both divs should be Off by default!

Answer 1

Maybe you would like something like this. I'm checking to see if the div is visible. If so, then I toggle the fade and active class. Hopefully this helps.

 $(".button1").click(function() { if($("#div2").is(':visible')){ $("#div2").fadeToggle(); $(".button2").toggleClass("active"); } $("#div1").fadeToggle(); $(".button1").toggleClass("active"); }); $(".button2").click(function() { if($("#div1").is(':visible')){ $("#div1").fadeToggle(); $(".button1").toggleClass("active"); } $("#div2").fadeToggle(); $(".button2").toggleClass("active"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div1" style="display:none">Div 1 Stuff</div> <div id="div2" style="display:none">Div 2 Stuff</div><br/> <i class="button1">Icon1</i> <i class="button2">Icon2</i>