HTML Fazer texto de outra div sumir

[Stacizinha]

Estou com dificuldades em um código, nem sei se da pra fazer isso apenas com html, mas...

 

vou tentar explicar, são duas divs diferente, uma delas vai o texto principal e a outra aparece a descrição quando se clica nas palavras da primeira div... o que eu quero fazer é deixar um texto onde fica a div da descrição e quando clicar no texto da primeira div a trocaria pelo da segunda, meio confuso pra explicar mais o código é esse:

 

<style>
.descricao{
    display: none;
}

</style>

<div id="textos1">

<span class="item"  onclick="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'">Idade</span>

<span class="item"  onclick="document.getElementById('div2').style.display='block'" onmouseout="document.getElementById('div2').style.display='none'">Genero</span>

<span class="item"  onclick="document.getElementById('div3').style.display='block'" onmouseout="document.getElementById('div3').style.display='none'">Estado</span>

</div>

<div id="textos2">
<span class="descricao" id="div1">Recomendado a todas as idades</span>

<span class="descricao" id="div2">Masculino</span>

<span class="descricao" id="div3">Goiás</span>

</div>

 

Resumindo, quero colocar um texto curto dentro da div textos2, mas que não seja fixo, ele tem que sumir quando aparecer os outros textos...

 

textos meramente ilustrativos

 

[DiF]

@Stacizinha Entendi acho eu.

 

Só com HTML não dá, mas dá para usar o CSS e fazer isso. O jeito mais simples e com menos linhas é usando jQuery. Mas se quiser só o CSS e o HTML já basta.

 

Exemplo:

HTML:

<div class="painel">
  <input type='checkbox' id='css-toggle-switch-idade' 
          checked='checked' class='css-toggle-switch'>
  <label for='css-toggle-switch-idade' class='btn'>
    Idade
  </label>
  <div class='css-toggle-content'>
    <p>
       Recomendado a todas as idades
    </p>
  </div >
</div>

CSS:

.css-toggle-switch { display: none; }
.css-toggle-switch         + label:before { content: "Esconder "; }
.css-toggle-switch:checked + label:before { content: "Mostrar "; }
.css-toggle-switch:checked ~ .css-toggle-content  { display: none; }

.css-toggle-switch + label {
   cursor: pointer;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}



/* configuração do botão */
.btn {
  padding: 5px 10px;
  background: white;
  border: 1px solid grey;
  border-radius: 3px;
  width: 130px;
  display: inline-block;
  text-align: center;
}
.btn:hover {
  background: #e6e6e6;
  -webkit-box-shadow: inset 0 -1px 0 #dddddd;
     -moz-box-shadow: inset 0 -1px 0 #dddddd;
          box-shadow: inset 0 -1px 0 #dddddd;
}
.painel {
    padding: 15px;
    background: #ffe06d;
    border: 1px solid #d69e01;
    border-radius: 3px;
    margin-bottom: 1em;
}

Exemplo online:  https://jsfiddle.net/dife/Lmyjw52u/11/