<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="col-lg-6 col-sm-6"> <div class="card hovercard"> <div class="card-background"> <img class="card-bkimg" alt="" src="https://pbs.twimg.com/profile_images/778143470183649280/IcN-m7b6.jpg"> <!-- http://lorempixel.com/850/280/people/9/ --> </div> <div class="useravatar"> <img alt="" src="https://pbs.twimg.com/profile_images/778143470183649280/IcN-m7b6.jpg"> </div> <div class="card-info"> <span class="card-title">Gorillaz</span> </div> </div> <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" id="about" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> <div class="hidden-xs">About</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="videos" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <div class="hidden-xs">Videos</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="social" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <div class="hidden-xs">Social</div> </button> </div> </div> <div class="well"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <h3>Gorillaz are a British virtual band created in 1998 by Damon Albarn and Jamie Hewlett. <br><br> The band consists of four animated members: <br></h3> <ul> <li>2D</li> <ul> <li>Lead Vocals</li> <li>Keyboard</li> </ul><br> <li>Murdoc Niccals</li> <ul> <li>Bass Guitar</li> <li>Vocals</li> </ul><br> <li>Noodle</li> <ul> <li>Guitar</li> <li>Keyboard</li> <li>Vocals</li> </ul><br> <li>Russel Hobbs</li> <ul> <li>Drums</li> <li>Percussion</li> </ul> </ul> </div> <div class="tab-pane fade in" id="tab2"> <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" id="video1" class="btn btn-primary" href="#tab2-1" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <div class="hidden-xs">Feel Good Inc.</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="video2" class="btn btn-default" href="#tab2-2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <div class="hidden-xs">Clint Eastwood</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="video3" class="btn btn-default" href="#tab2-3" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <div class="hidden-xs">Melancholy Hill</div> </button> </div> </div> <div class="well"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab2-1"> <h3>Feel Good Inc.</h3> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/HyHNuVaZJ-k"></iframe> </div> <a href="http://www.rollingstone.com/music/lists/100-best-songs-of-the-aughts-20110617/gorillaz-feel-good-inc-20110617">Ranked #99 in Rolling Stone's "100 Best Songs of the 2000s"</a> </div> <div class="tab-pane fade in" id="tab2-2"> <h3>Clint Eastwood</h3> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/UclCCFNG9q4"></iframe> </div> <a href="http://www.rollingstone.com/music/lists/100-best-songs-of-the-aughts-20110617/gorillaz-clint-eastwood-20110616">Ranked #38 in Rolling Stone's "100 Best Songs of the 2000s"</a> </div> <div class="tab-pane fade in" id="tab2-3"> <h3>Melancholy Hill</h3> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/04mfKJWDSzI"></iframe> </div> <a href="http://www.bbc.co.uk/blogs/chartblog/2010/07/gorillaz_on_melancholy_hill.shtml">Rated 5 Stars on BBC Chart</a> </div> </div> </div> </div> <div class="tab-pane fade in" id="tab3"> <a href="https://twitter.com/gorillaz?lang=en">Twitter</a> <br> <a href="https://www.instagram.com/gorillaz/">Instagram</a> <br> <a href="https://www.facebook.com/Gorillaz/">Facebook</a> <br> <a href="https://www.youtube.com/Gorillaz/">Youtube</a> <br> </div> </div> </div> <div> <a href="http://bootsnipp.com/iframe/n234v" target="_blank">Fullscreen.</a> <br> <a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fn234v" target="_blank">Validator.</a> </div> </div>

/* USER PROFILE PAGE */ .card { margin-top: 20px; padding: 30px; background-color: rgba(214, 224, 226, 0.2); -webkit-border-top-left-radius:5px; -moz-border-top-left-radius:5px; border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px; border-top-right-radius:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: #fff; background-color: rgba(255, 255, 255, 1); } .card.hovercard .card-background { height: 130px; } .card-background img { -webkit-filter: blur(25px); -moz-filter: blur(25px); -o-filter: blur(25px); -ms-filter: blur(25px); filter: blur(25px); margin-left: -100px; margin-top: -200px; min-width: 130%; } .card.hovercard .useravatar { position: absolute; top: 15px; left: 0; right: 0; } .card.hovercard .useravatar img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.5); } .card.hovercard .card-info { position: absolute; bottom: 14px; left: 0; right: 0; } .card.hovercard .card-info .card-title { padding:0 5px; font-size: 20px; line-height: 1; color: #262626; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .card.hovercard .card-info { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .btn-pref .btn { -webkit-border-radius:0 !important; }

$(document).ready(function() { $(".btn-pref .btn").click(function () { $(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default"); // $(".tab").addClass("active"); // instead of this do the below $(this).removeClass("btn-default").addClass("btn-primary"); }); });