<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="row"> <div class="col-md-3"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading1"> <div class="row"> <div class="col-xs-1"> <div class="state-map"> <i class="fa fa-map"></i> </div> </div> <div class="col-xs-10"> <h4 class="panel-title">WA</h4> </div> <div class="col-xs-1"> <a class="toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> <i class="right-arrow"></i> </a> </div> </div> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.le VHS.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <div class="row"> <div class="col-xs-1"> <div class="state-map"> <i class="fa fa-map"></i> </div> </div> <div class="col-xs-10 text-left"><h4 class="panel-title">NSW</h4></div> <div class="col-xs-1 text-center"> <a class="toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2"> <i class="right-arrow"></i> </a> </div> </div> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.le VHS.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading3"> <div class="row"> <div class="col-xs-1"> <div class="state-map"> <i class="fa fa-map"></i> </div> </div> <div class="col-xs-10 text-left"><h4 class="panel-title">SA</h4></div> <div class="col-xs-1 text-center"> <a class="toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3"> <i class="right-arrow"></i> </a> </div> </div> </div> <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.le VHS.</div> </div> </div> </div> </div> </div> </div>

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); .panel-heading a.toggle > .right-arrow:before { font-family: FontAwesome; content:"\f056"; padding-right: 5px; } .panel-heading a.collapsed.toggle .right-arrow:before { content:"\f055"; } .panel-heading a:hover, .panel-heading a:active, .panel-heading a:focus { text-decoration:none; } .panel-heading .state-map { padding-top: 5px; } .panel-heading h4 { padding-top: 5px; } .panel-heading .right-arrow { padding-top: 5px; }