通过单击按钮显示和隐藏div

Question

I have four divs, the first is showing on load of the site. I am currently hiding the other three on load with CSS (display: none)

Within that first div that is showing, I have a button that on click, I want to hide the current div and then show the next div.

<div id="one">
            <h3>Placeholder</h3>
            <form>
                    <button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
            </form>    

</div><!--Closes One-->

<div id="two">
            <h3>Placeholder</h3>
            <form>
                    <button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Two-->

<div id="three">
            <h3>Placeholder</h3>
            <form>
                    <button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Three-->

<div id="four">
            <h3>Placeholder</h3>
</div><!--Closes Four-->

So im looking to create some Jquery to make this happen.

Here's the janky code I have that doesnt really work at all...

$("#next1").click(function(){
    $("#two").show();
    $("#one").hide();
});

$("#next2").click(function(){
    $("#three").show();
    $("#two").hide();
});

$("#next3").click(function(){
    $("#four").show();
    $("#three").hide();
});

Forgot CSS, my apologies!

#two, #three, #four {
  display: none;
  }

I assume I dont need to explicitly say to hide all three divs every time due to CSS already hiding two through four, and then altering one at a time through Jquery.

Thank you ahead of time!

Answer 1

This should do it:

(you used classes instead of ids for your elements)

 $("#next1").click(function(){ $("#two").show(); $("#one").hide(); }); $("#next2").click(function(){ $("#three").show(); $("#two").hide(); }); $("#next3").click(function(){ $("#four").show(); $("#three").hide(); }); 

 #two, #three, #four { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="one"> <h3>Placeholder 1</h3> <form> <button id="next1" type="button" class="btn btn-lg btn-default">Next</button> </form> </div><!--Closes One--> <div id="two"> <h3>Placeholder 2</h3> <form> <button id="next2" type="button" class="btn btn-lg btn-default">Next</button> </form> </div><!--Closes Two--> <div id="three"> <h3>Placeholder 3</h3> <form> <button id="next3" type="button" class="btn btn-lg btn-default">Next</button> </form> </div><!--Closes Three--> <div id="four"> <h3>Placeholder 4</h3> </div><!--Closes Four--> 

Answer 2

So this is the simple query which you are looking after

$(".btn-default").click(function(){
$(this).closest('div').hide();  //Gets the closest div associated with your button click
$(this).closest('div').next('div').show();   //hide the next div
});

Answer 3

try this

 $("button.btn-default").click(function(){ $(this).closest('div').hide(); $(this).closest('div').next('div').show(); }); 

 #two, #three, #four { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="one"> <h3>Placeholder 1</h3> <form> <button id="next1" type="button" class="btn btn-lg btn-default">Next</button> </form> </div><!--Closes One--> <div id="two"> <h3>Placeholder 2</h3> <form> <button id="next2" type="button" class="btn btn-lg btn-default">Next</button> </form> </div><!--Closes Two--> <div id="three"> <h3>Placeholder 3</h3> <form> <button id="next3" type="button" class="btn btn-lg btn-default">Next</button> </form> </div><!--Closes Three--> <div id="four"> <h3>Placeholder 4</h3> </div><!--Closes Four--> 

Answer 4

It's not necessary to give each div it's own class or ID.

You could give them all the same class and use the jQuery eq: filter to choose the correct div.

Example code:

$(".custom button").click(function(){
    var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case.

    $('.custom').hide();
    $('.custom:eq(' + nextDiv + ')').show();
});

Working example: https://jsfiddle.net/ore5h6tk/

Another example, hiding all but the first with CSS: https://jsfiddle.net/ore5h6tk/1/

Hope this helps.

Answer 5

实际上，您的代码没有错。只需使四个div看起来有所不同即可。