隐藏div并显示另一个div

Question

I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.

I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)

Here is the fiddle Fiddle

 $('.add-box').click(function() { $('.test-div-2').show(); }); $('.add-box').click(function() { $('.test-div-1').hide(); }); 

 .test-div-1, .test-div-2, .test-div-3 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test-div-1">1</div> <div class="test-div-2">2</div> <div class="test-div-3">3</div> <a class="add-box">Add</a> 

Answer 1

Do below things:-

1.Add jQuery library before your script code.

2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).

3.Do show(),hide() in single click itself.

 $(document).ready(function(){ $('.add-box').click(function() { $('.test-div-2').show(); $('.test-div-1').hide(); }); }); 

 .test-div-1, .test-div-2, .test-div-3{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test-div-1">1</div> <div class="test-div-2">2</div> <div class="test-div-3">3</div> <a class="add-box">Add</a> 

Fiddle example:- https://jsfiddle.net/rrj1818a/

Note:-

If you want to show one-by-one then do like below:-

https://jsfiddle.net/87re6avo/

Answer 2

<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>



$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();

$current.removeClass('active');



if(!$next.length) {
$next = $('.test-div').first();


}



$next.addClass('active');

});