title: Trouble with show/hide JavaScript
body: <p>I am going to have an ExpressionEngine weblog that will place user designed content blocks in the footer. But, it's only going to show one at at time.</p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;ul class="footernav"&gt;
      &lt;li class="first"&gt;&lt;a class="active" href="#"&gt;Get in touch&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Interested in joining?&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="copy gutters show"&gt;
      &lt;p&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="copy gutters hide"&gt;
      &lt;p&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="copy gutters hide"&gt;
      &lt;p&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to switch the show class to a hide class depending on the clicked link. Not sure how I can accomplish this. It has to be flexible enough to work with N number of content blocks--because they will be defined by the user in ExpressionEngine.</p>
  
  <p>I'm pretty much brand new to JavaScript so I would really appreciate any insight, or solution for how I might accomplish this.</p>