<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 id="main"> <div class="container"> <a href="#" class='new'>OPEN</a> <div class="open"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <a href="#" class='new'>OPEN</a> <div class="open"> Strategic Resource Solutions (SRS Group Ltd) is a UK based team of commercially focused psychologists and psychometricians who provide in-depth objective assessments of individuals and groups for businesses of all sizes and across all market sectors. SRS Group Ltd can offer you an introduction to testing and assessment in the online psychometric test available by clicking the link above. Operating as a unit for more than 15 years, SRS Group Ltd have taken proven theory and developed highly practical commercially focused tools that bring pragmatic solutions to our clients. </div> <a href="#" class='new'>OPEN</a> <div class="open"> Strategic Resource Solutions (SRS Group Ltd) is a UK based team of commercially focused psychologists and psychometricians who provide in-depth objective assessments of individuals and groups for businesses of all sizes and across all market sectors. SRS Group Ltd can offer you an introduction to testing and assessment in the online psychometric test available by clicking the link above. Operating as a unit for more than 15 years, SRS Group Ltd have taken proven theory and developed highly practical commercially focused tools that bring pragmatic solutions to our clients. </div> </div> </div>

a.new{ display:block; width: 100%; background: purple; border-bottom: 5px solid black; color: white; font-weight: bold; font-size: 15px; padding: 10px; outline: none; } a.new:hover,a.new:focus{ color: white; outline: none; } .open{ background: #3498DB; color: white; padding: 10px; border-bottom: 3px solid white; display: none; } ul{ list-style-type: none; padding: 0; margin: 0; } ul a{ color: white; font-size: 15px; padding: 6px; }

$(document).ready(function () { $(document).ready(function () { var $accord = $('.open'); $(".new").click(function () { var $ans = $(this).next(".open").slideToggle(500); $accord.not($ans).filter(':visible').stop().slideUp(); }); }); });