Toggle Between two Divs [closed]

Answer 1

$(".gray").click(function(){
$(".gray").toggle();
      $(".orange").show();
  });
$(".blue").click(function(){
$(".blue").toggle();
      $(".orange").show();

 });
$(".orange").click(function(){
    $(".blue").toggle();
    $(".gray").toggle();
    $(".orange").toggle();
 });

DEMO

Answer 2

DEMO

$('.orange').hide();
$('.gray p').click(function(){
    $('.gray').hide();
    $('.orange').show();
});
$('.orange p').click(function(){
    $('.gray').show();
    $('.orange').hide();
});

Shorter code with .toggle()

DEMO

$('.orange').hide();
$('.gray p,.orange p').click(function(){
    $('.gray,.orange').toggle();
});

Answer 3

Similar to above answer:

$('.gray').click(function () {
    $(this).toggle();
    $('.orange').toggle();
});

$('.orange').click(function () {
    $(this).toggle();
    $('.gray').toggle();
});

Demo.

Answer 4

As you guessed, toggle() will do the job. When either .gray or .orange is clicked, we toggle the visibility of both:

$('.orange').hide();

$('.gray, .orange').on(
  'click',
  function() 
  {
    $('.gray, .orange').toggle()
  }
);

$('.orange').hide();
$('.gray, .orange').on('click',
  function() {
    $('.gray, .orange').toggle()
  }
);

.blue {
  height: 100px;
  width: 250px;
  background: #1ecae3;
  float: left;
}

.gray {
  height: 100px;
  width: 100px;
  background: #eee;
  float: left;
}

.orange {
  height: 100px;
  width: 150px;
  background: #fdcb05;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
  <p>Show --></p>
</div>
<div class="orange">
  <p>-- Hide</p>
</div>

Answer 5

I guess it should as simple as the following code. Please forgive the code alignment. Answering it via my cell phone :)

<style>
.blue{

height:100px; width:250px; background:#1ecae3; float:left; } 

.gray{

height:100px; width:100px; background:#eee; float:left; }

.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>

 <div class="blue"></div>
 <div class="gray"> <p> Show --> </p> </div>
 <div class="orange"> <p> -- Hide </p> </div>

<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});

 $(".orange p").click(function() {
 $(".gray").show()
 $(".orange").hide();
 } );
 </script>

Answer 6

Use following js :

jQuery('.gray').click(function(){
   jQuery(this).hide();
   jQuery('.orange').show();     
});
jQuery('.orange').click(function(){
jQuery(this).hide();
   jQuery('.gray').show();    
});

Here is the working fiddle : http://jsfiddle.net/WSCBu/6/