JSFiddle - React, Tailwind, and code Playground
HTML
<h4 class="text-center">Select your currency</h4>
<div id="menu" class="choose-currency text-center">
<a href=".currencypounds"><button class="btn btn-danger"><i class="icon-gbp"></i> Pounds</button></a>
<a href=".currencyeuros"><button class="btn btn-danger"><i class="icon-eur"></i> Euros</button></a>
<a href=".currencydollars"><button class="btn btn-danger"><i class="icon-usd"></i> Dollars</button></a>
</div>
<div class="row">
<div class="col-lg-3">
<div class="pricing-column">
<div class="pricing-head lead text-center">Ebook <strong>Standard</strong>
</div>
<div class="pricing-body text-center">
<div class="price-holder text-center spin">
<!--<span><strike>$279</strike></span>
$219-->
<div class="text-center ccs">
<!-- DIV FOR THE AD BLOCK -->
<div class="cc current currencypounds">£1369</div>
<div class="cc currencyeuros">€159</div>
<div class="cc currencydollars">$219</div>
</div>
<!-- end of #adSlideshow -->
</div>
<div class="offer-flash">Special launch prices:
<br />$219 | €159 | £139</div>
<ul class="pricing-features">
<li><span class="tttwo visible-lg" data-toggle="tooltip" rel="tooltip" title="We work with you to produce a professional concept based on your briefing." data-placement="bottom"><strong>One</strong> concept <i class="icon-info-sign tttwo"></i></span>
</li>
<li><strong>Unlimited</strong> revisions</li>
<li><strong>Bespoke</strong> design</li>
<li><strong>Inclusive</strong> royalty-free...
CSS
.cc {
display: none; }
.cc.current {
display: block; }
#menu li {
margin-left: 2em }
.choose-currency {
margin-bottom: 30px; }
.choose-currency button {
margin: 0 5px; }
.price-holder {
color: red }
}
JavaScript
jQuery("#menu a").click(function (e) {
var link = jQuery(this).attr('href');
var showIt = jQuery(link);
var hideIt = jQuery(".cc.current");
hideIt.fadeOut(100, function () {
hideIt.removeClass("current");
showIt.addClass("current");
showIt.fadeIn(100);
});
e.preventDefault();
return false;
});