title: Hide several divs, show 1 by default, and switch (show/hide) between them based on link click?
body: <p>I know the show/hide thing has been covered to death on stack, but I just can't find a solution that works for me, sorry. I've tried several JS/jQuery solutions that I found and can't quite get one to behave the way I'd like.</p>
  <p>I have many divs that are very similar in content (content changes slightly based on version selected), and all have the exact same style.</p>
  <h3>Desired behavior</h3>
  <p>I'd like one div to show by default with all others hidden. Then, based on a link click, a different version div is displayed and all other content divs are hidden.</p>
  <h3>Basic HTML</h3>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;h1&gt;Header&lt;/h1&gt;
    &lt;p&gt;Basic info about page&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;#ver1&quot; id=&quot;linkToVer1&quot;&gt;Version 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#ver2&quot; id=&quot;linkToVer2&quot;&gt;Version 2&lt;/a&gt;&lt;/li&gt;
      // More links to other divs
    &lt;/ul&gt;
  
    &lt;div class=&quot;content&quot; id=&quot;ver1&quot;&gt;    // I'd like this div to be the default
       Content here                    // when the page loads. All other divs 
    &lt;/div&gt;                             // are hidden until a link is clicked.
  
    &lt;div class=&quot;content&quot; id=&quot;ver2&quot;&gt;
       Content here
    &lt;/div&gt;
  
    // More content divs
  &lt;/div&gt;
  </code></pre>
  <p>I'll have up to a dozen different versions of these content divs.</p>
  <p>JS or jQuery is fine, but jQuery is preferred because I'll probably add some kind of show/hide effect. I don't care that greatly about the naming structure of the divs or links.</p>