<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 ---------->
<div class="container">
<div class="jumbotron"><h3>Custom Radio Inputs With Selected Content</h3></div>
<div class="row">
<div class="col-md-4">
<div class="content bottom-border" id="radio1Div">
<strong>Option 1</strong>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p>
<hr />
<button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button>
<div class="radio-container">
<input class="radio" type="radio" name="radio" id="radio1" checked />
<label for="radio1"></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content" id="radio2Div">
<strong>Option 2</strong>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p>
<hr />
<button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button>
<div class="radio-container">
<input class="radio" type="radio" name="radio" id="radio2" />
<label for="radio2"></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content" id="radio3Div">
<strong>Option 3</strong>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p>
<hr />
<button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button>
<div class="radio-container">
<input class="radio" type="radio" name="radio" id="radio3"/>
<label for="radio3"></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content" id="radio4Div">
<strong>Option 4</strong>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p>
<hr />
<button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button>
<div class="radio-container">
<input class="radio" type="radio" name="radio" id="radio4"/>
<label for="radio4"></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content" id="radio5Div">
<strong>Option 5</strong>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p>
<hr />
<button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button>
<div class="radio-container">
<input class="radio" type="radio" name="radio" id="radio5" />
<label for="radio5"></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content" id="radio6Div">
<strong>Option 6</strong>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p>
<hr />
<button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button>
<div class="radio-container">
<input class="radio" type="radio" name="radio" id="radio6"/>
<label for="radio6"></label>
</div>
</div>
</div>
</div>
</div>
body{ background:transparent url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=background-blur-clean-531880.jpg&fm=jpg');
}
.content{
position:relative;
border:1px solid #c0c0c0;
width:100%;
padding:20px 20px 20px 60px;
height:300px;
margin-bottom:30px;
background-color:#fff;
}
.content .radio-container {
position: absolute;
left: 15px;
top: 22px
}
.radio-container input[type="radio"] {
position: fixed;
top: -9999px;
left: -9999px;
}
.radio-container label:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid #c0c0c0;
padding: 15px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 15px;
border-radius: 10px;
}
.radio-container input:checked + label:after {
content: '';
display: block;
position: absolute;
top: 6px;
left: 12px;
width: 10px;
height: 20px;
border: solid #c0c0c0;
border-width: 0 4px 4px 0;
transform: rotate(45deg);
}
.bottom-border {
border-color: #52c5f8;
border-bottom: 10px solid #52c5f8;
background-color: #dff3ff;
color: #52c5f8;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
-webkit-transition: color 1000ms linear;
-ms-transition:color 1000ms linear;
transition: color 1000ms linear;
}
$("input.radio:radio").change(function () {
var kid = $(this).attr('id')
if ('input[name=radio]:checked') {
$('.content').removeClass('bottom-border');
$('#' + kid + 'Div').addClass('bottom-border');
}
});
