EFFXDesign

Further to the first expand and contract jQuery example we decided to extend the functionality to so that we could re-use the code over and over without having to rewrite the code using a simple function wrapper:

<script>
function toggleSection(sectionId){
	if($(sectionId).is(':hidden')){$(sectionId).show('slow');}else{$(sectionId).hide('slow');}; return false;
}
</script>

This allowed us to recreate the effect over and over again within the same page without the need to re-write the orignal code.

to us this it is a simple case of:

<a href="#foo" onclick="toggleSection('#foo');">Toggle Foo</a>

<div id="foo" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate suscipit leo a mollis. Aliquam erat volutpat. Ut tempus urna nibh, vitae pulvinar diam. Aliquam erat volutpat. Sed vitae purus sollicitudin ante ultrices tincidunt. Nunc pulvinar molestie nunc, eu commodo neque volutpat fermentum. Proin euismod, arcu dapibus euismod auctor, est sem consectetur metus, eget molestie diam nibh nec lacus. Suspendisse vehicula, nibh sit amet rhoncus egestas, diam purus dignissim neque, eu viverra nisi elit rutrum nisi. Pellentesque tempus vehicula justo ac tempus. Cras semper scelerisque dignissim.
</div>

Working Example:

Toggle Foo