<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 ----------> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 col-xs-12"> <h3><i class="fa fa-user"></i> Profile</h3> <div class="panel-group" id="accordion"> <!-- panel1 --> <div class="panel panel-default" id="panel1"> <div class="panel-heading" data-toggle="collapse" data-target="#collapse1"> <h4 class="panel-title"><a data-toggle="collapse" data-target="#collapse1" href="#collapse1">Profile</a></h4> </div> <div id="collapse1" class="panel-collapse collapse in fade"> <div class="panel-body"> <p>User: misspig@gmail.com</p> <p>Bacon ipsum dolor amet loin salami swine frankfurter cow doner short loin landjaeger shankle jerky picanha tenderloin.</p> <ul> <li>Best viewed <a href="http://bootsnipp.com/iframe/x81pB" target="_blank">full screen</a></li> <li><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fx81pB" class="pull-left" target="_blank"><small>HTML</small>^{5 valid}</a> </li> </ul> </div> </div> </div> <!-- panel2 --> <div class="panel panel-default" id="panel2" data-toggle="collapse" data-target="#collapse2"> <div class="panel-heading" data-toggle="collapse" data-target="#collapse2"> <h4 class="panel-title"><a data-toggle="collapse" data-target="#collapse2" href="#collapse2" class="collapsed">Links</a></h4> </div> <div id="collapse2" class="panel-collapse collapse fade"> <div class="panel-body"> Drumstick beef ribs venison sirloin pork loin salami swine frankfurter cow doner short loin landjaeger shankle pig. Meatloaf swine filet mignon, shankle biltong ground round tongue pancetta jerky picanha tenderloin. </div> </div> </div> <!-- panel3 --> <div class="panel panel-default" id="panel3" data-toggle="collapse" data-target="#collapse3"> <div class="panel-heading" data-toggle="collapse" data-target="#collapse3"> <h4 class="panel-title"><a data-toggle="collapse" data-target="#collapse3" href="#collapse3" class="collapsed">Notes</a></h4> </div> <div id="collapse3" class="panel-collapse collapse fade"> <div class="panel-body">Drumstick beef ribs venison sirloin pork loin salami swine frankfurter cow doner short loin landjaeger shankle pig. Meatloaf swine filet mignon, shankle biltong ground round tongue pancetta jerky picanha tenderloin. Fatback t-bone sausage ground round. Pastrami meatball spare ribs sirloin. </div> </div> </div> </div> </div> </div> </div>

body { background-image: url("http://i.imgur.com/wAf5LKb.jpg"); background-repeat: no-repeat; background-position: right top; } h3 { color: #fff; } /* From https://jsfiddle.net/Wc4xt/1052 */ .panel-heading a:after { font-family: 'fontawesome'; content: "\f07d"; float: right; color: grey; } .panel-heading { cursor: pointer; cursor: hand; }

$(document).on('click', '.panel-heading', function(e){ alert('hi'); e.stopPropagation(); // some action ... });