<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <h3> <a data-toggle="collapse" href="#collapseExample" aria-expanded="true" aria-controls="collapseExample"> Open/Close collapse <i class="glyphicon glyphicon-plus-sign"></i> <i class="glyphicon glyphicon-minus-sign"></i> </a> </h3> <div id="collapseExample" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, ratione impedit distinctio totam eum hic tempore repudiandae? Ea nisi expedita delectus ipsum quae quidem praesentium incidunt sed voluptatum. Blanditiis, reprehenderit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, ratione impedit distinctio totam eum hic tempore repudiandae? Ea nisi expedita delectus ipsum quae quidem praesentium incidunt sed voluptatum. Blanditiis, reprehenderit.</p> </div> </div> </div> </div>

body { background-color:#000; color:#fff; } a[aria-expanded=true] .glyphicon-plus-sign { display: none; } a[aria-expanded=false] .glyphicon-minus-sign { display: none; } .panel-collapse { background-color:grey; padding:10px; }