Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non sem at sapien vulputate fringilla. Curabitur leo leo, tincidunt eu placerat vitae, venenatis ac sem. Ut a dapibus eros. Cras ut imperdiet leo. Nulla fermentum, turpis nec commodo sodales, nibh eros varius diam, sed commodo eros nibh vel est. Etiam sollicitudin lobortis ipsum, et vehicula velit accumsan ut. Ut tempus est id neque pharetra sodales. Cras scelerisque sem non urna aliquam imperdiet. Proin consectetur eleifend diam, quis tempor libero tincidunt in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vel libero erat, sed pellentesque sapien. Maecenas at tortor et orci vehicula ultricies eget mattis orci. Nam ut magna a nisi scelerisque hendrerit. Vestibulum tempus dictum augue, congue elementum elit bibendum sit amet. Vivamus ornare arcu a tellus lacinia auctor.
Clicking the link below will reveal more content. Clicking a second time will hide it again (a toggle). This example uses the jQuery .toggle() function to show/hide a page element.
Here's the script that does the work:
<script type="text/javascript">
$(document).ready(function(){
$("#link a").click(function(){
$("#extra").toggle();
return false;
});
});</script>
The parent paragraph to the anchor has an id="link" and the hidden paragraph has an id="extra".
Duis sed ligula odio, sed posuere magna. Integer facilisis interdum hendrerit. Nunc eleifend tempus facilisis. Nunc mattis erat ut justo scelerisque sed convallis lorem ultricies. Proin convallis vehicula tincidunt. Fusce ac sapien et odio consectetur condimentum et id elit. Suspendisse potenti. Aliquam erat volutpat. Mauris sollicitudin aliquam lacus, sit amet commodo nisl ornare sed. In tristique, mauris at auctor gravida, tellus nibh dapibus elit, nec cursus purus nisl faucibus magna. Morbi feugiat pulvinar pretium.