Dynamic Content rendering on radio selection

 

Dynamic Content rendering on radio selection

Almost 82% of the sites are dynamic now. Static websites are started changing/converting to dynamic websites for easy maintenance and better user interactivity. Shopping websites/social network websites are loading their content dynamically on-demand to maintain their performance. Similar way we are going to see how to render the contents dynamically on change of radio selections.

 

Requirements & Imports:

1. jQuery:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

2. Bootstrap [CSS & JS] – include only if you need it to be responsive.

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”http://getbootstrap.com/dist/js/bootstrap.min.js”></script>

HTML Code:

All the page contents are below, but all the contents will not be displayed same time. Based on the radio selection it will render and display the respecive div’s.

<div class="container" id="root1">
<div id="SearchDiv" class="row" style="display:none;">
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SearchTopics" value="Google" id="Google">Google[select this radio button]</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SearchTopics" value="Yahoo" id="Yahoo">Yahoo</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SearchTopics" value="Bing" id="Bing">Bing</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SearchTopics" value="Duckduckgo" id="Duckduckgo">Duckduckgo</div>
</div>
<div id="SocialDiv" class="row" style="display:none;">
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SocialDiv" value="and" id="and">Facebook</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SocialDiv" value="or" id="or">Twitter</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="SocialDiv" value="bitwise" id="bitwise">Google Plus</div>
</div>
<div id="ShoppingDiv" class="row" style="display:none;">
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="ShoppingDiv" value="flipkart" id="flipkart">Flipkart</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="ShoppingDiv" value="amazon" id="amazon">Amazon</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="ShoppingDiv" value="ebay" id="ebay">Ebay</div>
</div>

</div>
<div class="container" id="root2">
<div id="GoogleDiv" class="row" style="display:none;">
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="GoogleTopics" value="Gmail" id="Gmail">Gmail</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="GoogleTopics" value="Plus" id="Plus">Google Plus</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="GoogleTopics" value="News" id="News">Google News</div>
<div class="col-md-12 col-xs-12 col-sm-12"><input type="radio" name="GoogleTopics" value="Android" id="Android">Android</div>
</div>

</div>

 

Javascript Source code:

<script type="text/javascript">
$(document).ready(function(){
$('div#root1').hide();
// called when radio button changed
$("input[name='topics']").change(function() {
slctdTopicsRdio = $("input[name='topics']:checked").val();
slctdTopicsRdioDiv = slctdTopicsRdio+'Div';
$('div#root1').show();
$('#'+slctdTopicsRdioDiv).show();
$('#root1 div').not('#'+slctdTopicsRdioDiv).hide(); // hide all but the relevant div
$('#'+slctdTopicsRdioDiv).children().show();
animateMe('#'+slctdTopicsRdioDiv,"24px");
$(window).scrollTop($('#'+slctdTopicsRdioDiv).offset().top);
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){

$("input[name='SearchTopics']").change(function() {
slctdTopicsRdio = $("input[name='SearchTopics']:checked").val();
slctdTopicsRdioDiv = slctdTopicsRdio+'Div';
$('#'+slctdTopicsRdioDiv).show();
$('#root2 div').not('#'+slctdTopicsRdioDiv).hide(); // hide all but the relevant div
$('#'+slctdTopicsRdioDiv).children().show();
animateMe('#'+slctdTopicsRdioDiv,"30px");
// to scroll the content to the display part
$(window).scrollTop($('#'+slctdTopicsRdioDiv).offset().top);
});
});
</script>

<script type="text/javascript">
// method to animate the content after radio button change
function animateMe(divID,fontValue){
$( divID )
.animate({
width: "100%"
}, {
queue: false,
duration: 3000
})
.animate({ fontSize: fontValue }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
}
</script>

Radio selection onchange example shared below, which renders the respective div’s.

We have used animate jQuery function to make it some more interactive.

Share your comments/feedbacks/thoughts in the below comments section.