Dynamic render content on radio button change using bootstrap 4, jQuery
Dynamic render content on radio button change using bootstrap 4, jQuery:
Interactive dynamic render content (here coupon and offer) is displayed on click coupon/offer radio button. UI is designed using bootstrap 4. jQuery is used to hide and show the respective contents(coupon/offer) on radio button change.
By default both is displayed with the one more radio button named “All”.
Bootstrap 4 Sidebar and Content UI Source code:
[html]
<!DOCTYPE html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<!– Bootstrap CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” integrity=”sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ” crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
</head>
<body>
<nav class=”navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary yamm” id=”slide-nav”>
<button class=”navbar-toggler navbar-toggler-left” type=”button” data-toggle=”collapse” data-target=”#navbarTopMenu” aria-controls=”navbarTopMenu” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”container”>
<a class=”navbar-brand” href=”#”>Javadomain</a>
<div class=”navbar-brand”>
</div>
<div class=”collapse navbar-collapse” id=”navbarTopMenu”>
<ul class=”navbar-nav mr-auto mt-2 mt-md-0″>
</ul>
<div class=”navbar-toggleable-sm”>
<form class=”form-inline my-2 my-lg-0″>
<input class=”form-control mr-sm-2″ type=”text” placeholder=”Search”>
<button class=”btn btn-outline-success my-2 my-sm-0″ type=”submit”>Search</button>
</form>
</div>
</div>
</div>
<!–/.container inside nav–>
</nav>
<!– page container starts –>
<div class=”container” style=”margin-top:4rem;”>
<div class=”row”>
<div class=”col-md-3″>
<br/>
<!– Radio type sidebar starts –>
<div class=”sidebar-cover hidden-sm-down”>
<h4> Filter by Type </h4>
<br/>
<div class=”custom-controls-stacked”>
<label class=”custom-control custom-radio”>
<input id=”all” name=”coupon-type” type=”radio” class=”custom-control-input” value=”all” checked>
<span class=”custom-control-indicator”></span>
<span class=”custom-control-description”>All</span>
</label>
<label class=”custom-control custom-radio”>
<input id=”coupon” name=”coupon-type” type=”radio” class=”custom-control-input” value=”coupon”>
<span class=”custom-control-indicator”></span>
<span class=”custom-control-description”>Coupons</span>
</label>
<label class=”custom-control custom-radio”>
<input id=”Offer” name=”coupon-type” type=”radio” class=”custom-control-input” value=”offer”>
<span class=”custom-control-indicator”></span>
<span class=”custom-control-description”>Offers</span>
</label>
</div><!– /.radio type ends –>
</div>
</div>
<div class=”col-md-9″>
<div class=”main-content-box”>
<div class=”row coupon-type content-box”>
<div class=”col-md-2 vl”>Rs. 20000 OFF</div>
<div class=”col-md-8″>Rs. 10/- Cashback on Rs. 100/- Recharge
<br/>
<div class=”show-more-less”>
It’s coupon content.
</div>
<br/>
</hr>
<div class=”card-footer text-muted”>
<span class=”lmtdpoff”><i>Limited Period Offer</i></span> | <span class=”glyphicon glyphicon-search” aria-hidden=”true”></span><span class=”days-ago”>Verified 3 day(s) ago</span>
</div>
</div>
<div class=”col-md-2″>COUPON</div>
</div>
<div class=”row offer-type content-box”>
<div class=”col-md-2 vl”>Rs. 1000 OFF</div>
<div class=”col-md-“>Rs. 1000/- Offer on Mobiles
<br/>
<div class=”show-more-less”>
Time to buy mobiles with great discounts.
</div>
<br/>
</hr>
<div class=”card-footer text-muted”>
<span class=”lmtdpoff”><i>Limited Period Offer</i></span> | <span class=”glyphicon glyphicon-search” aria-hidden=”true”></span><span class=”days-ago”>Verified 1 day(s) ago</span>
</div>
</div>
<div class=”col-md-2″>OFFER</div>
</div>
</div>
</div>
</div>
</div>
<!– page container ends –>
</div>
<!– jQuery first, then Tether, then Bootstrap JS. –>
<script src=”https://code.jquery.com/jquery-3.1.1.slim.min.js” integrity=”sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n” crossorigin=”anonymous”></script>
<script src=”js/tether.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js” integrity=”sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn” crossorigin=”anonymous”></script>
<script src=”js/cc.js”></script>
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on(‘click’, ‘.yamm .dropdown-menu’, function(e) {
e.stopPropagation()
})
})
$(document).ready(function() {
$(“input[name$=’coupon-type’]”).click(function() {
var couponType = $(this).val();
if(couponType == ‘all’){
$(“.offer-type”).show();
$(“.coupon-type”).show();
}
if(couponType == ‘coupon’){
$(“.offer-type”).hide();
$(“.coupon-type”).show();
}
if(couponType == ‘offer’){
$(“.offer-type”).show();
$(“.coupon-type”).hide();
}
});
});
</script>
</body>
</html>
[/html]
Radio click Show/Hide jQuery source code:
[html]
$(document).ready(function() {
$(“input[name$=’coupon-type’]”).click(function() {
var couponType = $(this).val();
if(couponType == ‘all’){
$(“.offer-type”).show();
$(“.coupon-type”).show();
}
if(couponType == ‘coupon’){
$(“.offer-type”).hide();
$(“.coupon-type”).show();
}
if(couponType == ‘offer’){
$(“.offer-type”).show();
$(“.coupon-type”).hide();
}
});
});
[/html]
Demo:
