Mostrar div com base na seleção e ocultar o div anterior

Eu estava me perguntando como era possível mostrar um DIV clicando em outro DIV e depois escondendo um DIV diferente que estava ativo antes.

Eu estava brincando com o slideUp JQuery () e slideDown (); e eu não consigo fazer isso funcionar.

Este é o JSFiddle que estou trabalhando para apenas mexer: https://jsfiddle.net/wLayxqq2/

Estou tentando mostrar o conteúdo relacionado a essas colors!

Eu encontrei JSFiddle semelhante que mostram como esconder e mostrar conteúdo de um div, mas não como esconder o conteúdo do div “ativo” anterior!

Código HTML:

Red
Yellow
Green
This is content for red
This is content for Yellow
This is content for Green

CSS do código:

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

Dar um atributo de dados para os divs e mapear com colors, o que você pode usar como

 
Red
Yellow
Green
This is content for red
This is content for Yellow
This is content for Green

jquery

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

Violino

experimentar

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

DEMO

HTML: Vermelho Amarelo Verde

 
This is content for red
This is content for Yellow
This is content for Green

JS:

 $('.option').click(function(){ $('.colors').hide(); $('#' + $(this).data('id')).show(); }); 
 
Red
Yellow
Green
This is content for red
This is content for Yellow
This is content for Green
$(".option").on("click",function(){ color = $(this).data("color"); $(".colors").slideUp(); $("#"+color).slideDown(); })

https://jsfiddle.net/4q38yo4z/

Você tem um pequeno erro:

 
Green
...
This is content for Green

Então, usando o nome no DIV para mostrar o conteúdo pode falhar você.

Em vez disso, você pode include algumas informações de identificação exclusivas nas divs que deseja clicar. Você pode usar o método data () do jQuery.

 $(".option").on("click", function(e){ var id = $(this).data("color"); $(".colors").hide(); // Hide all content DIVs $("#"+id).show(); // Show the target DIV }) 
 .option{ display:inline-block; border: solid 1px; margin:5px; padding:5px; } .colors { display:none; } 
  
Red
Yellow
Green
This is content for red
This is content for Yellow
This is content for Green