JavaScript toggle code

by
This entry was published at least two years ago (originally posted on January 11, 2004). Since that time the information may have become outdated or my beliefs may have changed (in general, assume a more open and liberal current viewpoint). A fuller disclaimer is available.

I’m just saving this for myself for future design possibilities… The script that goes in the head:

<script type="text/javascript">
<!-- 
// toggle visibility 

function toggle( targetId ){ 
  if (document.getElementById){ 
        target = document.getElementById( targetId ); 
           if (target.style.display == "none"){ 
              target.style.display = ""; 
           } else { 
              target.style.display = "none"; 
           } 
     } 
} 
-->
</script>

Sample code showing usage:

<h3>Blogs I Read <a href="#" onclick="toggle('outside2');return false;" title="Toggle BlogRoll">(show/hide)</a></h3> 

    <div id="outside2"> 
        <h1><a href="http://www.google.com" title="google.">Google Search</a><br /> 
        <a href="http://www.google.com" title="google.">Google Search</a></h1> 
        <div class="dailyphoto"><!--#include virtual="/daily/dailyphoto.inc"--></div> 
  </div> 

<h3>Blogs I Read <a href="#" onclick="toggle('outside3');return false;" title="Toggle BlogRoll">(show/hide)</a></h3> 

    <div id="outside3"> 
        <h1><a href="http://www.google.com" title="google.">Google Search</a><br /> 
        <a href="http://www.google.com" title="google.">Google Search</a></h1> 
        <div class="dailyphoto"><!--#include virtual="/daily/dailyphoto.inc"--></div> 
  </div></div>

(via Joel Blain)

iTunes: “World, The” by Quest from the album Essential Chillout (2000, 4:17).