单击以隐藏每个div并在jquery中显示另一个div

Question

I am new to jQuery. Trying to hide the first div and show second div. When I again click on 2nd div, it will show me the first div.

Here is my code.

 $(".c1").on('click', function() { $(".one").fadeIn(); $(".two").fadeOut(); }); $(".c2").on('click', function() { $(".two").fadeIn(); $(".one").fadeOut(); }); 

 .right { font-size: 20px; float: right; margin-right: 50px; } .ab-container { margin-bottom: 50px; } .container { padding: 30px 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <a href="" class="right c1"> Click to see div 2</a></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two"> <div class="ab-head "> <h1>This is div 2 <a href="" class="right c2"> Click to see div 1</a></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div> 

Answer 1

• You have your fadeOut and fadeIn calls inverted.
• You need to prevent the a link behavior.
• Pass as callback your fadeIn call.

Look at this code snippet with those fixes

I've added a hide class to show how the DIVs appear and disappear.

 $(".c1").on('click', function(e) { e.preventDefault(); $(".one").fadeOut(function() { $(".two").fadeIn(); }); }); $(".c2").on('click', function(e) { e.preventDefault(); $(".two").fadeOut(function() { $(".one").fadeIn(); }); }); 

 .right { font-size: 20px; float: right; margin-right: 50px; } .ab-container { margin-bottom: 50px; } .container { padding: 30px 60px; } .hide { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <a href="" class="right c1"> Click to see div 2</a></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two hide"> <div class="ab-head "> <h1>This is div 2 <a href="" class="right c2"> Click to see div 1</a></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div> 

See? now is working your logic!

Answer 2

First, it will work better if you use spans instead of links

The nyou have the order of fadein/fadeout confused:

 $(".c1").on('click', function() { $(".two").fadeIn(); $(".one").fadeOut(); }); $(".c2").on('click', function() { $(".one").fadeIn(); $(".two").fadeOut(); }); 

 .right { font-size: 20px; float: right; margin-right: 50px; } .ab-container { margin-bottom: 50px; } .container { padding: 30px 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <span class="right c1"> Click to see div 2</span></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two"> <div class="ab-head "> <h1>This is div 2 <span class="right c2"> Click to see div 1</span></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div> 

Answer 3

Your code is working you only need to remove the href="" from your <a> tag. However, here is my way of doing it if you like to take a look. And the edited version of the HTML

 $('.c1').click(function () { $('.one').fadeIn(); $('.two').fadeOut(); }) $('.c2').click(function () { $('.two').fadeIn(); $('.one').fadeOut(); }) 

 <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <a class="right c1"> Click to see div 2</a></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two"> <div class="ab-head "> <h1>This is div 2 <a class="right c2"> Click to see div 1</a></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div>