Switch between two sections

Question

I ran into the problem of creating some Toggle effect with jQuery between two divs. I am very bad at jQuery. and with the knowledge that I could not do to switch between two divs.

Current code in JS script: http://jsfiddle.net/WSCBu/

I have three sections. Class name Blue, gray and orange. What I'm trying to do is: when the page loads only two divs Blue and gray will show, and when I click Text "Show" on the gray div, the gray div will show Hide and Orange Div. and when I click "Hide" the text in the orange div, that orange div will be hidden and display the gray div again. Maybe this can be done using the switch function? I really don't know how to do this. Hope for experts is easy! I will be very grateful if someone will show me this process.

here is 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; } 

Answer 1

As you might have guessed, toggle() will do the job. When the .gray or .orange buttons .gray .orange , we switch 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 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

Use the following js:

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

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

Answer 4

As in the previous answer:

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

Demo version

Answer 5

 $(".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 6

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

Answer 7

Add a class view to the two divs and then you can use the switch method. An example of http://jsfiddle.net/WSCBu/21/ is shown here.

 <div class="blue"></div> <div class="gray show" style="display:none";> <p> Show --> </p> </div> <div class="orange show"> <p> -- Hide </p> </div> $(document).on('click','.show',function(){ $('.show').toggle(); }); 

Answer 8

I think it should be as simple as the following code. Please forgive the alignment of the code. Answering it through my mobile 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>