I need to have two price tables on a website, but only have one active / impression.
He will need to function as a slider, so when you click the arrow, the next price table is loaded and displayed.
I need a snippet for this that will work with Bootstrap 3.
I use this table http://bootsnipp.com/snippets/featured/bootstrap-30-responsive-pricing-tables and the code for the table:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>PRO PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$10 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-blue">
<div class="panel-heading arrow_box text-center">
<h3>DEV PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$20 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-info"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-info"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info" href="#">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-green">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-grey">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-primary" href="#">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>
</div>
</div>
</div>
source
share