"Price Table with Hidden (Clickable) Form."
Bootstrap 3.3.0 Snippet by zysra

<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 ----------> <h1 style="text-align:center;">Hi guys, Please click to <strong>Join</strong> and see that what is it.</h1> <br><br> <div class="sub_table"> <div class="container"> <div class="row"> <div class="table_title"> <p>Step One</p> <hr> <h1>Choose Your Plan</h1> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <div class="box-1 center"> <div class="panel panel-success panel-pricing"> <div class="panel-heading"> <h3>1 Month</h3> </div> <div class="panel-body text-center"> <p><strong>$100</strong></p> </div> <ul class="list-group text-center"> <li class="list-group-item"><strong>10</strong><br> Fidelity Point</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join1">JOIN</a> </div> </div> </div> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <div class="box-1 center"> <div class="panel panel-success panel-pricing"> <div class="panel-heading"> <h3>3 Month</h3> </div> <div class="panel-body text-center"> <p><strong>$300</strong></p> </div> <ul class="list-group text-center"> <li class="list-group-item"><strong>30</strong><br> Fidelity Point</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join2">JOIN</a> </div> </div> </div> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <div class="box-1 center"> <div class="panel panel-success panel-pricing"> <div class="panel-heading"> <h3>6 Month</h3> </div> <div class="panel-body text-center"> <p><strong>$600</strong></p> </div> <ul class="list-group text-center"> <li class="list-group-item"><strong>90</strong><br> Fidelity Point</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join3">JOIN</a> </div> </div> </div> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <div class="box-1 center"> <div class="panel panel-success panel-pricing"> <div class="panel-heading"> <h3>12 Month</h3> </div> <div class="panel-body text-center"> <p><strong>$1200</strong></p> </div> <ul class="list-group text-center"> <li class="list-group-item"><strong>240</strong> <br> Fidelity Point</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join4">JOIN</a> </div> </div> </div> </div> </div> </div> <div class="row" id="form_div"> <div class="container"> <div class="order"> <div class="table_title"> <p>Step Two</p> <hr> <h1>Enter Your Order</h1> </div> <form method="post" action=""> <div class="col-sm-6 col-md-6 col-xs-12"> <div class="row"> <div class="col-sm-8 col-md-8 col-xs-12"> <p> <input type="text" placeholder="Street Address" name="street_address"> </p> </div> <div class="col-sm-4 col-md-4 col-xs-12"> <p> <input type="text" placeholder="Suite Apt" name="suit_apt"> </p> </div> <div class="col-sm-6 col-md-6 col-xs-12"> <p> <input type="text" placeholder="City" name="city"> </p> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <p> <select name="state"> <option class="active">State</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </p> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <p> <input type="text" placeholder="Zip Code" name="zip_code"> </p> </div> <div class="col-sm-6 col-md-6 col-xs-12"> <p> <input type="text" placeholder="Phone Number" name="phone_no"> </p> </div> <div class="col-sm-6 col-md-6 col-xs-12"> <p> <input type="email" placeholder="Email Address" name="email"> </p> </div> </div> </div> <div class="col-sm-6 col-md-6 col-xs-12"> <div class="col-sm-6 col-md-6 col-xs-12"> <p> <input type="text" placeholder="First Name" name="fname"> </p> </div> <div class="col-sm-6 col-md-6 col-xs-12"> <p> <input type="text" placeholder="Last Name" name="lname"> </p> </div> <!--<button class="cn_btn">Continue</button>--> <input type="submit" class="cn_btn" name="submit" value="Continue" /> </div> </form> </div> </div> </div> </div> <div id="form_div1" class="row"> <div class="container"> <div class="order"> <div class="table_title"> <p>Step Three</p> <hr> <h1>Add a Payment Method </h1> </div> <form action="" method="post"> <div class="col-sm-6 col-md-6 col-xs-12"> <div class="row"> <div class="col-sm-9 col-md-9 col-xs-12"> <p> <input type="text" name="ac_number" placeholder="Credit Card / Debit Card Number "> </p> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <p> <input type="text" name="cvv" placeholder="CVV"> </p> </div> <div class="col-sm-6 col-md-6 col-xs-12"> <p> <select name="month"> <option class="active">Month</option> <option value="1">January</option> <option value="2">Febuary</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </p> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <p> <select name="year"> <option class="active">Year</option> <option value="1">2015</option> <option value="2">2016</option> </select> </p> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <p> <input type="text" name="zip" placeholder="Billing Zip"> </p> </div> </div> </div> <div class="col-sm-3 col-md-3 col-xs-12"> <div class="r_pay"> <!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><a href="https://www.paypal.com/uk/webapps/mpp/paypal-popup" title="How PayPal Works" onclick="javascript:window.open('https://www.paypal.com/uk/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/AM_mc_vs_ms_ae_UK.png" border="0" alt="PayPal Acceptance Mark"></a></td></tr></table><!-- PayPal Logo --> <button>Get It</button> <button>Cancel / Remove From Cart</button> </div> </div> </form> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); body{font-family: 'Raleway', sans-serif;} .table_title h1, .table_title p { text-align: center; } .table_title > p { font-size: 21px; } .table_title > hr { border-color: #e3e3e3; border-width: 3px; max-width: 3%; width: 100%; } .table_title h1, .table_title p { text-align: center; } .table_title > h1 { font-size: 33px !important; } .center { text-align: center; } .panel-success { border: 1px solid #ffd3b4; } .panel-success > .panel-heading { background: #f05f40 none repeat scroll 0 0; color: #fff; padding: 10px 15px; } .panel-body { padding: 15px; } .panel-body.text-center > p { margin-bottom: 0; } .panel-body.text-center strong { font-size: 24px; } .panel > .list-group, .panel > .panel-collapse > .list-group { margin-bottom: 0; } .list-group-item { font-size: 20px; padding-bottom: 18px; } .list-group + .panel-footer { border-top-width: 0; } .panel-footer { background-color: #f5f5f5; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top: 1px solid #ddd; padding: 10px 15px; } .btn.btn-lg.btn-block.btn-success { background: #f05f40 none repeat scroll 0 0; color: #fff !important; } .btn { border: 0 none; border-radius: 300px; font-family: "Raleway",sans-serif; font-weight: 700; text-transform: uppercase; } .table_title > h1 { font-size: 33px !important; padding-bottom:20px; } /*form*/ .order input, .order select { border: 2px solid #e5e5e5 !important; } .order input, select { -moz-appearance: none; border: 1px solid #e5e5e5; border-radius: 2px; box-sizing: border-box; color: #666; font-size: 14px; font-weight: 300; margin-bottom: 20px; padding: 14px 15px; transition: border-color 0.25s ease 0s; width: 100%; } .cn_btn { background: #f05f40 none repeat scroll 0 0; color: #fff !important; margin: 0 0 0 15px !important; max-width: 241px; padding: 14px 0 !important; width: 100%; } .order input:focus, .order select:focus { border: 2px solid #f05f40 !important; } .r_pay img { margin-top: -16px; max-width: 225px; width: 100%; } .r_pay > button { background: #f05f40 none repeat scroll 0 0; border: medium none; border-radius: 3px; color: #fff; margin: 3px 0; padding: 8.5px 0; width: 100%; } p{margin-bottom"10px;}
$(document).ready(function(e) { $("#form_div, #form_div1").hide(); $("#join1").click(function(){ $("#form_div, #form_div1").toggle( "slow" ); }); $("#join2").click(function(){ $("#form_div, #form_div1").toggle( "slow" ); }); $("#join3").click(function(){ $("#form_div, #form_div1").toggle( "slow" ); }); $("#join4").click(function(){ $("#form_div, #form_div1").toggle( "slow" ); }); });

Related: See More


Questions / Comments: