Question

Given two spans like this:

<span>Click for info</span> <span style='display: none'>Here is a big long string of info blah blah</span> 

…I’d like to have an onclick function attached to each so that the visitor sees ‘Click for info’, and then when they click it, the first span is hidden and the second is unhidden. And, of course, when the second is clicked, things go back to the way they were originally.

I don’t have a way of easily generating unique IDs, so I’d prefer to avoid the getElementByID() route, and I’d rather not use jQuery or any other heavyweight dependency. Is there an elegant way to do this?

The best idea I have so far is to write a toggleAllSiblings() function, set onclick to that function for both elements in the pair, and then wrap each pair in a parent element.

Can it be done without the parent node?

Answer 1

Yet another version, a la progressive enhancement — will properly show the full info when JavaScript is off.

<span class='details'>Here is a big long string of info blah blah</span>  <script type='text/javascript'>     // Open/close span behaviour     //     function infoToggle(span) {         var ersatz= document.createElement('span');         ersatz.appendChild(document.createTextNode('Click for info...'));         span.parentNode.insertBefore(ersatz, span);         span.style.display= 'none';          span.onclick= function() {             ersatz.style.display= 'inline';             span.style.display= 'none';         };         ersatz.onclick= function() {             ersatz.style.display= 'none';             span.style.display= 'inline';         };     }      // Bind to all spans with class='details'     //     var spans= document.getElementsByTagName('span');     for (var i= spans.length; i-->0;)         if (spans[i].className=='details')             infoToggle(spans[i]); </script>