<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Click on my account and Open modal - phone verifications</h2> <ul><li>1 Phone verification do next </li> <li>2 OTP verification do next </li> <li>3 Success message </li></ul> <div class="col-md-12 text-center"><a href="#" class="btn-link-white" type="button" data-toggle="modal" data-target="#phoneModal">My Account</a></div> </div> </div> <!-- Phone Modal --> <div class="phoneModal-popup"> <div class="modal fade" id="phoneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="store-find-block"> <div class="mydivs"> <div class="store-find"> <div class="store-head"> <h1>Phone Number Verifcation</h1> <h4>Enter Your phone number to login/ sign up</h4> </div> <!-- Text input--> <div class="store-form"> <form> <div class="row"> <div class="form-group"> <label class="col-md-12 control-label sr-only" for="Phone">Phone</label> <div class="col-md-12"> <input id="Phone" name="Phone" type="text" placeholder="Phone" class="form-control input-md" required=""> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label sr-only" for="next">next</label> <div class="col-md-12"> <button id="next" name="next" class="btn btn-primary btn-block btn-lg">Next</button> </div> </div> </div> </form> <p class="seperator">or</p> <div class="social-login-section"> <a href="#" class="social-login-btn facebook-btn">Continue with Facebook</a> <a href="#" class="social-login-btn twitter-btn">Continue with Twitter</a> </div> </div> </div> <div class="code-varifications"> <div class="store-find"> <div class="store-head"> <button name="prev" class="btn-link">Back</button> <h1>Code Verifcation</h1> <h4>Enter your code in below area.</h4> </div> <!-- Text input--> <div class="store-form"> <form> <div class="row"> <div class="form-group"> <label class="col-md-12 control-label sr-only" for="Phone">Phone</label> <div class="col-md-3 nopr"> <input id="number" name="number" type="text" placeholder="0" class="form-control input-md" required=""> </div> <div class="col-md-3 nopr"> <input id="number" name="number" type="text" placeholder="0" class="form-control input-md" required=""> </div> <div class="col-md-3 nopr"> <input id="number" name="number" type="text" placeholder="0" class="form-control input-md" required=""> </div> <div class="col-md-3 "> <input id="number" name="number" type="text" placeholder="0" class="form-control input-md" required=""> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label sr-only" for="next">next</label> <div class="col-md-12"> <button id="next" name="next" class="btn btn-primary btn-block btn-lg">Next</button> </div> </div> </div> </form> </div> </div> </div> <div class="success-message"> <div class="store-find"> <div class="store-form"> <div class="success-sign"><i class="fa fa-check-circle"></i></div> <h1>Successful Verification</h1> </div> </div> </div> </div> <div class="store-footer text-center"> <p>You agree to our <strong>Terms of Service</strong> & <strong>Privacy Policy</strong></p> </div> <!-- next div code --> </div> </div> </div> </div> </div> </div> Credit by <a href="http://jituchauhan.com/" target="_blank"> jitu chauhan</a>

.phoneModal-popup{} .phoneModal-popup .modal-body{padding:40px;}

$(document).ready(function() { var divs = $('.mydivs>div'); var now = 0; // currently shown div divs.hide().first().show(); $("button[name=next]").click(function(e) { divs.eq(now).hide(); now = (now + 1 < divs.length) ? now + 1 : 0; divs.eq(now).show(); // show next }); $("button[name=prev]").click(function(e) { divs.eq(now).hide(); now = (now > 0) ? now - 1 : divs.length - 1; divs.eq(now).show(); // or .css('display','block'); //console.log(divs.length, now); }); });