<script type="text/javascript">// For each link element that has the class name "showMore",// tie the 'click' event to the 'showHide' functionEvent.observe(window, 'load',function() { $$('a.showMore').invoke('observe', 'click', showHide);});

function showHide(event){ // Use the event to get the id of the element that invoked the function var currentElement = Event.element(event);

// Get the parent node of that element and the value of it's "rel" attribute var toggleContainer = $(currentElement).parentNode.getAttribute('rel');

// Get the toggle caption based on the html of the clicked element var toggleCaption = ($(currentElement).innerHTML.toLowerCase() == "more") ? "Less" : "More";

// Update the current element with the new caption value $(currentElement).update(toggleCaption);

// If the container to be toggled exists, toggle it's visibility if ($(toggleContainer)) { $(toggleContainer).toggle(); }

// Return false so the link does not go anywhere return false;}</script>

Something to keep in mind is that you cannot simply copy the JavaScript in the head of the HTML page. That is because the line "$$('a.showMore').invoke('observe', 'click', showHide);", needs to fire after the HTML has been rendered. To resolve this, we can one of two things:

Put the script in the head tag but wrap it inside a window load observer or dom:loaded event (if you are using Prototype v1.6) like so: