<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 id="startenquiry" class="container"> <div class="row"> <h2><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Phone Enquiry</h2> </div> <div class="form-group"> <label for="mobile">Mobile</label> <input type="text" class="form-control" id="mobile" placeholder="Customer's mobile phone number"> </div> <div class="form-group"> <label for="emailadd">Email</label> <input type="email" class="form-control" id="emailadd" placeholder="Customer's email address"> </div> <div class="row"> <button type="submit" class="btn btn-default" id="exitcall1">Exit Call</button> <button type="submit" class="btn btn-warning" id="continue1">Continue</button> </div> </div> <div id="customerhistory" class="container"> <div class="row"> <h2><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Contact History</h2> </div> <table class="table"> <thead> <tr> <th>Date</th> <th>Method</th> <th>Outcome</th> <th>Staff</th> <th>Contact</th> <th>Product(s)</th> <th> </th> </tr> </thead> <tbody> <tr> <td>10-Oct-2016<br>(1 day ago)</td> <td>Call Centre</td> <td>Dropped call</td> <td>Jane Doe</td> <td>Email: test@example.com<br> Mobile: 0439123456 </td> <td> <span class="label label-info">Home Loan</span> </td> <td> <button class="btn btn-primary pull-right" type="button" data-toggle="modal" data-target="#resumeenquiry" id="resumecontact">Resume</button> </td> </tr> <tr> <td>10-Sep-2016<br>(1 month ago)</td> <td>Website</td> <td> </td> <td> </td> <td>Email: test@example.com </td> <td> <span class="label label-info">Home Loan</span> <span class="label label-success">Credit Card</span> </td> <td> <button class="btn btn-primary pull-right" type="button" data-toggle="modal" data-target="#resumeenquiry" id="resumecontact">Resume</button> </td> </tr> </tbody> </table> <div class="row"> <button type="submit" class="btn btn-default" id="exitcall2" data-toggle="modal" data-target="#exitcallmodal">Exit Call</button> <button type="submit" class="btn btn-warning" id="newenquiry2">New Enquiry</button> </div> </div> <!-- Resume Modal --> <div class="modal fade" id="resumeenquiry" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content" id="sendcodemethod"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Resume Previous</h4> </div> <div class="modal-body"> <p>To resume this enquiry we will send a code to the customer. Please select the method(s):</p> <div class="checkbox"> <label><input type="checkbox" value="mobile" checked>SMS code to <b>0439123456</b></label> </div> <div class="checkbox"> <label><input type="checkbox" value="email">Email code to <b>test@example.com</b></label> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-warning" id="sendcode">Send Code</button> </div> </div> <div class="modal-content" id="sendcodeverify"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Verify Code</h4> </div> <div class="modal-body"> <p>The customer has been sent a code. Ask them for the code and enter it here. </p> <form class="form-inline"> <div class="form-group"> <label for="code">Verification Code:</label> <input type="text" class="form-control" id="code"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-warning" id="sendcode">Verify Code</button> </div> </div> </div> </div> <!-- Exit Call Modal --> <div class="modal fade" id="exitcallmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Exit Call</h4> </div> <div class="modal-body"> <b>Reason:</b> <div class="radio"> <label><input type="radio" name="optradio">Dropped line</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Customer busy</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Other reason</label> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-warning" id="exitcallmodalbutton">Exit Call</button> </div> </div> </div> </div>

h2 > .glyphicon { padding-right: 8px; } #startenquiry { display: none; } #customerhistory { /* display: none; */ } #sendcodemethod { } #sendcodeverify { display: none; }

$( document ).ready(function() { $( "#mobile" ).focus(); $( "#resumecontact" ).click(function() { $("#sendcodemethod").show(); $("#sendcodeverify").hide(); }); $( "#sendcode" ).click(function() { $("#sendcodemethod").hide(); $("#sendcodeverify").show(); }); $( "#exitcall2" ).click(function() { /* $( "#startenquiry" ).show(); $( "#customerhistory" ).hide(); $( "#mobile" ).focus(); */ }); $( "#continue1" ).click(function() { $( "#startenquiry" ).hide(); $( "#customerhistory" ).show(); }); $( "#newenquiry2" ).click(function() { alert('TEST'); }); });