CODEWITHSUNDEEP
javascriptjquery
Kyle Schmelzer
Kyle Schmelzer

Reputation: 153

showing and hiding divs by clicking a button

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!

Upvotes: 2

Views: 145

Answers (5)

york
york

Reputation: 108

Actually there is nothing wrong with your code .Just make the four divs looks difference.

Upvotes: 1

Huso
Huso

Reputation: 1486

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.

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

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-->

Upvotes: 1

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4588

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

Upvotes: 1

Robert
Robert

Reputation: 426

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-->

Upvotes: 1

Related Questions