javascript - Toggle Between two Divs -

i facing problem in making toggle effect jquery between 2 divs . @ poor level on jquery. , knowledge failed make toggle between 2 divs .

current code in js fiddle : http://jsfiddle.net/wscbu/

i have 3 divs class name blue , gray , orange . trying make : when page loads 2 div blue , gray show , when click text "show" on gray div gray div hide , orange div show . , when click "hide" text in orange div orange div hide , again show gray div . may can done toggle function ? not sure how . hope experts may easy 1 ! thankful if show me process .

here html

<div class="blue"></div> <div class="gray">   <p> show --> </p> </div> <div class="orange">   <p> -- hide </p> </div> 

css

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

as guessed, toggle() job. when either .gray or .orange clicked, toggle 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>