document.documentElement.className += " js"; jQuery(document).ready(function( $ ) { $( document ).delegate( ".collapsed", "click", function (e) { var $this = $( this ), expanded = $this.hasClass( "expanded" ), href; e.preventDefault(); // In case they click directly on the <a> tag if ( !expanded ) { $this.addClass( "expanded" ); } else { href = $this.children().eq( 0 ).find( "a" ).attr( "href" ); window.location = href; } }); });
<div class="collapsed"> <h2><a href="http://slashdot.org">Test Title</a></h2> <p> Summary content </p> </div> <div class="collapsed"> <h2><a href="http://slashdot.org">Test Title2</a></h2> <p> Summary content2 </p> </div>
.collapsed { background-color: #f0f0f0; padding: 0px; } .collapsed h2 { border-style:solid; border-width:thin; cursor:pointer; background-color: #d0d0d0; padding: 6px; } .collapsed h2 a { text-decoration: none; color: black; } .js .collapsed p { display: none; } .js .collapsed.expanded p { display: block; }