title: Show div based on selection & hide previous div
body: <p>I was wondering how it was possible to show a DIV by clicking on another DIV and then hiding a different DIV that was active before.</p>
  
  <p>I was messing around with the JQuery slideUp() and slideDown(); and I can't seem to get it to work.</p>
  
  <p>This is the JSFiddle I'm working with to just mess around:
  <a href="https://jsfiddle.net/wLayxqq2/" rel="nofollow">https://jsfiddle.net/wLayxqq2/</a></p>
  
  <p>I'm trying to show the content related to those color!</p>
  
  <p>I have found similar JSFiddle that show how to hide and show content from ONE div but not how to hide the content from the previous "active" div!</p>
  
  <p>Code HTML: </p>
  
  <pre><code>&lt;div class="option"&gt;Red&lt;/div&gt;
  &lt;div class="option"&gt;Yellow&lt;/div&gt;
  &lt;div class="option"&gt;Green&lt;/div&gt;
  
  &lt;div id="red" class="colors"&gt; This is content for red &lt;/div&gt;
  &lt;div id="yellow" class="colors"&gt; This is content for Yellow &lt;/div&gt;
  &lt;div id="blue" class="colors"&gt; This is content for Green &lt;/div&gt;
  </code></pre>
  
  <p>Code CSS:</p>
  
  <pre><code>.option{
      display:inline-block;
      border: solid 1px;
      margin:5px;
      padding:5px;
  }
  </code></pre>