$(document).ready(function(){ $('.collapse, .collapse a').live('click',function(e){ e.preventDefault(); $(this).unbind('click') .removeClass('collapse') .addClass('expand'); }) });
<div class="collapse"> <h2><a href="http://slashdot.org">Test Title</a></h2> <p>Summary content</p> </div> <div class="collapse"> <h2><a href="http://slashdot.org">Test Title2</a></h2> <p>Summary content2</p> </div>
.expand, .collapse { background-color: #f0f0f0; padding: 0px; } .expand h2, .collapse h2{ border-style:solid; border-width:thin; cursor:pointer; background-color: #d0d0d0; padding: 6px; } .expand h2 a, .collapse h2 a { text-decoration: none; color: black; } .collapse p { display:none; } .expand p { display:block; }