Home

jQuery: expand/contract divs - Part 1

We wanted to create an expand and contract item, controlled by the title of the item.

For this we used jQuery and some of the very simple commands which worked very well.

There are many ways of doing this, and this is just a basic example

We will do this in an inline style, as it is very easy to implement:

<a href="#foo" onclick="if($('#foo').is(':hidden')){$('#foo').show('slow');}else{$('#foo').hide('slow');}; return false;">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

Other nice effects that can work with only a few changes:

>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec augue ut magna pulvinar bibendum. Proin lorem nulla, lacinia ut consequat sit amet, sollicitudin ac ipsum. Integer quam mauris, blandit eget varius blandit, sagittis sed libero. Proin eu risus eget velit fermentum vulputate. Mauris sed molestie turpis. Ut ullamcorper diam sed mauris consectetur ullamcorper. Vestibulum dictum metus auctor elit adipiscing nec malesuada ligula dignissim. Proin pulvinar velit quis lectus consequat ut commodo dolor rutrum. Cras dictum bibendum felis ut porttitor. Duis vel sodales tortor. Pellentesque pharetra convallis ipsum ut convallis. Morbi egestas quam a mauris varius vehicula eu vitae augue. Nunc rhoncus luctus magna, at rutrum magna faucibus sit amet. Ut accumsan cursus neque et sollicitudin. In ullamcorper arcu quis magna lobortis vitae tincidunt purus vestibulum. In non nulla tellus, at laoreet tortor. Suspendisse non nisi vel risus tincidunt venenatis quis a lectus. Duis leo urna, commodo id feugiat vitae, consectetur a augue. Maecenas feugiat semper lorem, facilisis accumsan leo volutpat et.

Etiam laoreet faucibus ante ac tincidunt. Sed fermentum, nisi ac pellentesque tempus, justo felis pellentesque dui, vel rhoncus nulla urna quis erat. Duis accumsan auctor turpis, in iaculis metus consequat in. In hac habitasse platea dictumst. Integer pulvinar, lectus vitae auctor interdum, justo libero suscipit tortor, in malesuada ligula mi ornare est. Suspendisse luctus commodo purus et viverra. Nulla eu turpis metus, et mattis ligula. Aenean commodo, justo sit amet vestibulum gravida, nisi magna tempus nibh, nec pharetra ligula ipsum ac nisi. Donec lacus leo, imperdiet ut dapibus id, volutpat consequat diam. Cras pulvinar ullamcorper justo, eu suscipit orci rhoncus vitae. Nam tellus ligula, rutrum blandit venenatis sit amet, placerat blandit lectus.

And a little smother:

>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec augue ut magna pulvinar bibendum. Proin lorem nulla, lacinia ut consequat sit amet, sollicitudin ac ipsum. Integer quam mauris, blandit eget varius blandit, sagittis sed libero. Proin eu risus eget velit fermentum vulputate. Mauris sed molestie turpis. Ut ullamcorper diam sed mauris consectetur ullamcorper. Vestibulum dictum metus auctor elit adipiscing nec malesuada ligula dignissim. Proin pulvinar velit quis lectus consequat ut commodo dolor rutrum. Cras dictum bibendum felis ut porttitor. Duis vel sodales tortor. Pellentesque pharetra convallis ipsum ut convallis. Morbi egestas quam a mauris varius vehicula eu vitae augue. Nunc rhoncus luctus magna, at rutrum magna faucibus sit amet. Ut accumsan cursus neque et sollicitudin. In ullamcorper arcu quis magna lobortis vitae tincidunt purus vestibulum. In non nulla tellus, at laoreet tortor. Suspendisse non nisi vel risus tincidunt venenatis quis a lectus. Duis leo urna, commodo id feugiat vitae, consectetur a augue. Maecenas feugiat semper lorem, facilisis accumsan leo volutpat et.

Etiam laoreet faucibus ante ac tincidunt. Sed fermentum, nisi ac pellentesque tempus, justo felis pellentesque dui, vel rhoncus nulla urna quis erat. Duis accumsan auctor turpis, in iaculis metus consequat in. In hac habitasse platea dictumst. Integer pulvinar, lectus vitae auctor interdum, justo libero suscipit tortor, in malesuada ligula mi ornare est. Suspendisse luctus commodo purus et viverra. Nulla eu turpis metus, et mattis ligula. Aenean commodo, justo sit amet vestibulum gravida, nisi magna tempus nibh, nec pharetra ligula ipsum ac nisi. Donec lacus leo, imperdiet ut dapibus id, volutpat consequat diam. Cras pulvinar ullamcorper justo, eu suscipit orci rhoncus vitae. Nam tellus ligula, rutrum blandit venenatis sit amet, placerat blandit lectus.

This is very basic, we could extend the functionality and base it on classes but for now this will do.

This is extended in Part 2.

Share this