<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 href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Navbar</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right "> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> </div> <!-- NAVBAR CODE END --> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <br /> <h2>Bootstrap Collapse Panel With Icon</h2> <h5> Crafted by <a href="http://www.designbootstrap.com/" target="_blank">DesignBootstrap</a> </h5> <br /> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4"> <div class="fancy-collapse-panel"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> </div> </div> </div> </div> </div> <!-- CONATINER END -->

/* GENERAL STYLES */ body { font-family: Verdana; } /* FANCY COLLAPSE PANEL STYLES */ .fancy-collapse-panel .panel-default > .panel-heading { padding: 0; } .fancy-collapse-panel .panel-heading a { padding: 12px 35px 12px 15px; display: inline-block; width: 100%; background-color: #EE556C; color: #ffffff; position: relative; text-decoration: none; } .fancy-collapse-panel .panel-heading a:after { font-family: "FontAwesome"; content: "\f147"; position: absolute; right: 20px; font-size: 20px; font-weight: 400; top: 50%; line-height: 1; margin-top: -10px; } .fancy-collapse-panel .panel-heading a.collapsed:after { content: "\f196"; }