javascript - Show div based on selection & hide previous div -

i wondering how possible show div clicking on div , hiding different div active before.

i messing around jquery slideup() , slidedown(); , can't seem work.

this jsfiddle i'm working mess around: https://jsfiddle.net/wlayxqq2/

i'm trying show content related color!

i have found similar jsfiddle show how hide , show content 1 div not how hide content 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"> content red </div> <div id="yellow" class="colors"> content yellow </div> <div id="blue" class="colors"> content green </div> 

code css:

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

give data-attribute divs , map colors, can use like

<div data-id="red" class="option">red</div> <div data-id="yellow" class="option">yellow</div> <div data-id="blue" class="option">green</div>  <div id="red" class="colors"> content red </div> <div id="yellow" class="colors"> content yellow </div> <div id="blue" class="colors"> content green </div> 

jquery

$(".colors").hide(); $(".option").click(function(){     $(".colors").hide();     $("#"+$(this).data("id")).show(); }); 

fiddle