Kyle Schmelzer Kyle Schmelzer - 29 days ago 11
HTML Question

Trying to show and hide divs for sequencing effect

I have 3 divs on the page, I only want to show one at a time.

On load, shows div 1 (and only shows div1, div2 and div3 are hidden), with 3 options. No matter what option the user picks, I want div 1 to hide, and div 2 to show. Div 2 only has one option, so select the option and div 3 shows.

There are some similar to this question on stackoverflow, but with 3 options to click in div 1, im having trouble seeming to make it work. (i need each with a different value to display what what chosen in div 1 and 2 in div 3)

JSFidle - https://jsfiddle.net/7yuuz8d4/4/

html:

<!doctype html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>

<div class="container">
<div id="div1">
<h2>Pick a style</h2>



<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual">Casual &raquo;</a>
</div><!--Closes Col-md-4-->

<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="street">Street &raquo;</a>
</div><!--Closes Col-md-4-->

<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="classic">Classic &raquo;</a>
</div><!--Closes Col-md-4-->
</div><!--Closes div1-->

<div id="div2">
<h3>Measurements</h3>
<select>
<option value="tall">tall</option>
<option value="average">average</option>
<option value="short">short</option>
</select>
<a class="btn btn-primary btn-lg" href="#div3" role="button">Next &raquo;</a>
</div><!--Closes div2-->


<div id="div3">
<h3>Review</h3>
<p>Display style and measurements selected:</p>
<div id="display">

</div>
<a class="btn btn-primary btn-lg" href="success.html" role="button">Submit &raquo;</a>
</div><!--Closes div3-->
</div><!--Closes container-->

</body>


Jquery -

function showDiv(selector){

//---Select div to show
var element = $("div#" + selector);

//---Hide all div except the above div
$("div[id^='div']").not(element).hide();

//---Show the div
element.show();

}

//---When the select changes
$(".btn btn-primary btn-lg").on("click", function(){

showDiv( $(this).val() );

});

//---Show the first div by default
showDiv("#div1");


Thank you in advance, as always you all are a great help!

Answer
$(document).ready(function () {
            $('#div1').show();
            $('#div2').hide();
            $('#div3').hide();

            $('#div1').on('click', 'a', function (e) {
                $('#div1').hide();
                $('#div2').show();
            });

            $('#div2').on('click', 'a', function (e) {
                $('#div2').hide();
                $('#div3').show();
            });
        });