Trouble with show/hide JavaScript
<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>
