title: How can I make a list of show/hide sections?
body: <p>For my website, I'm making a list of show/hide links (java script and css), and I want each one to say something different. However, when I try that, the show/hide links after the first one don't  work. Any help? Suggestions? Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showHide(shID) {
     if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
           document.getElementById(shID+'-show').style.display = 'none';
           document.getElementById(shID).style.display = 'block';
        }
        else {
           document.getElementById(shID+'-show').style.display = 'inline';
           document.getElementById(shID).style.display = 'none';
        }
     }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   .more {
        display: none;
     a.showLink, a.hideLink {
        text-decoration: none;
        color: #36f;
        padding-left: 8px;
        background: transparent url(down.gif) no-repeat left; }
     a.hideLink {
        background: transparent url(up.gif) no-repeat left; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"&gt;&lt;span class="sec"&gt;Section 1-&lt;/span&gt;&lt;span class="seccontent"&gt;site navigation&lt;/span&gt;&lt;/a&gt;
        &lt;div id="example" class="more"&gt;
  &lt;a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"&gt;&lt;span class="sec"&gt;Section 1-&lt;/span&gt;&lt;span class="seccontent"&gt;site navigation&lt;/span&gt;&lt;/a&gt;
          &lt;p&gt;example content&lt;/p&gt;
        &lt;/div&gt;
  
  &lt;a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"&gt;&lt;span class="sec"&gt;Section 2-&lt;/span&gt;&lt;span class="seccontent"&gt;products&lt;/span&gt;&lt;/a&gt;
        &lt;div id="example" class="more"&gt;
  &lt;a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"&gt;&lt;span class="sec"&gt;Section 2-&lt;/span&gt;&lt;span class="seccontent"&gt;products&lt;/span&gt;&lt;/a&gt;
          &lt;p&gt;stuffs&lt;/p&gt;
        &lt;/div&gt;
          </code></pre>
  </div>
  </div>
  </p>