Simple javascript/css show/hide

This describes the simple jquery show/hide toggle that's in use on the clinics page

Example markup:

<div class="simpleToggleArea">
<a href="javascript:void(0);" class="simpleToggle">Question number one</a>
The copy for Question number one

<a href="javascript:void(0);" class="simpleToggle">Question number two</a>
The copy for Question number two

<a href="javascript:void(0);" class="simpleToggle">Question number three</a>
The copy for Question number three

<a href="javascript:void(0);" class="simpleToggle">Question number four</a>
The copy for Question number four

jQuery(document).ready( function() {
jQuery('.simpleToggleArea p').hide();
jQuery('.simpleToggle').click( function() {

<style type="text/css">
#this is probably needed in most cases too
.simpleToggle { display:block; }

When the page loads, all paragraph tags in the div are hidden.  Then when any of the links are clicked, the next element is toggled.  This means that the paragraph to be toggled must follow the link that toggles it exactly -- if there's another element after the link, even just a stray text element, that will be toggled instead of the paragraph.

Also since all paragraphs in simpleToggleArea are hidden, care must be taken in the rich text editor to make sure any leading or trailing copy is outside of the simpleToggleArea div -- otherwise those will be hidden and there will be no link to toggle them back.

Keywords:javascript css show hide toggle clinics   Doc ID:35123
Owner:Jeffrey K.Group:Law School
Created:2013-11-05 17:38 CDTUpdated:2013-11-06 12:05 CDT
Sites:Law School
Feedback:  8   7