https:////example.com/style.css X

#accordion { width:90%; margin:10px auto; border:2px solid white; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); } #accordion h2 { cursor:pointer; margin:0px 0px; padding:7px 15px; background-color:black; font:bold 11px Verdana,Arial,Sans-Serif; color:#e6e6e6; text-shadow:0px 1px 0px rgba(0,0,0,0.4); } #accordion .content { background-color:#ddd; padding:10px 15px; color:black; height:120px; } #accordion h2.active { background-color:#4BB347; }

https:////example.com/script.js X

$(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); });

<div id="accordion"> <h2>Panel 1</h2> <div class="content"> .... </div> <h2>Panel 2</h2> <div class="content"> .... </div> <h2>Panel 3</h2> <div class="content"> .... </div> <h2>Panel 4</h2> <div class="content"> .... </div> </div>