<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="center"><h1 style='margin-top: 20px; '> News Deck! </h1></div> <hr style="border-width: 2px 2px 0; border-style: solid; border-color: palevioletred; width: 100%; margin-left: auto; margin-right: auto;"/> <section id="news"><br> <div class="container-fluid"> <div class="row"> <div class=" col-sm-1"></div> <div class="col-md-8 col-sm-8 col-lg-8 col-sm-offset-1"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse10"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse10" class="panel-collapse collapse"> <div class="panel-body"> <p>News Paragraph</p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse9" class="panel-collapse collapse"> <div class="panel-body"> <p>News Paragraph</p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse8"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse8" class="panel-collapse collapse"> <div class="panel-body"> <p> News Paragraph</p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse7"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse7" class="panel-collapse collapse"> <div class="panel-body"> <p> News Paragraph</p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse6"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse6" class="panel-collapse collapse"> <div class="panel-body"> <p>News Paragraph</p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse5"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse5" class="panel-collapse collapse"> <div class="panel-body"> <p>News Paragraph </p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse4"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse4" class="panel-collapse collapse"> <div class="panel-body"> <p>News Paragraph</p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body"> <p> News Paragraph </p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> News Title. <i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> <p> News Paragraph</p></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> News Title.<i class="more-less glyphicon glyphicon-plus"></i></a> </h4> </div> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body"> <p> News Paragraph </p></div> </div> </div> </div> </div> </div></div> </section>

<style>.drop-shadow{-webkit-box-shadow:0 0 5px 2px rgba(0,0,0,.25);box-shadow:0 0 5px 2px rgba(0,0,0,.25)}.source{color:#000}.NewRed{color:red;font-size:12px}.more-less{float:right;color:#eb749f}body{overflow-x:hidden}.btn{background-color:#eb749f;color:white;border-radius:12px;} .btn:hover{background-color:#777;color:white;box-shadow:0 0 20px rgba(0, 0, 0, 0.20);} .panel{transition:all 200ms ease-out;} .panel:hover{box-shadow:0 0 20px rgba(0, 0, 0, 0.40);} h1{color:#eb749f;font-weight:300;} a{color:#eb749f;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms;}</style>

<script>function toggleIcon(e){$(e.target).prev('.panel-heading').find(".more-less").toggleClass('glyphicon-plus glyphicon-minus');} $('.panel-group').on('hidden.bs.collapse',toggleIcon);$('.panel-group').on('shown.bs.collapse',toggleIcon);</script>