try

  $（。colors）。hide（）; 
 $（'。option'）。click（function（）{
 $（。colors）。hide（）; 
 $（＃+ $（this）.text （）.toLowerCase（））。show（）; 

}）; 
 

DEMO

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.

I was messing around with the JQuery slideUp() and slideDown(); and I can't seem to get it to work.

This is the JSFiddle I'm working with to just mess around: https://jsfiddle.net/wLayxqq2/

I'm trying to show the content related to those color!

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!

Code HTML:

<div class="option">Red</div>
<div class="option">Yellow</div>
<div class="option">Green</div>

<div id="red" class="colors"> This is content for red </div>
<div id="yellow" class="colors"> This is content for Yellow </div>
<div id="blue" class="colors"> This is content for Green </div>

Code CSS:

.option{
    display:inline-block;
    border: solid 1px;
    margin:5px;
    padding:5px;
}

try

$(".colors").hide();
$('.option').click(function(){
    $(".colors").hide();
  $("#"+$(this).text().toLowerCase()).show();

});

DEMO