Make another div text disappear

Asked

Viewed 46 times

2

Make text from a different div disappear when another text appears

<style>
.descricao{
    display: none;
}
</style>
<div id="textos1">
<span class="item"  onclick="document.getElementById('vaga1').style.display='block'" onmouseout="document.getElementById('vaga1').style.display='none'">Idade</span>
<span class="item"  onclick="document.getElementById('vaga2').style.display='block'" onmouseout="document.getElementById('vaga2').style.display='none'">Genero</span>
<span class="item"  onclick="document.getElementById('vaga3').style.display='block'" onmouseout="document.getElementById('vaga3').style.display='none'">Estado</span>
</div>

<div id="textos2">
<span class="descricao" id="vaga1">Recomendado a todas as idades</span>
<span class="descricao" id="vaga2">Masculino</span>
<span class="descricao" id="vaga3">Goiás</span>
</div>

I want to put a text inside the texts2 div, but that is not fixed, it has to disappear when the other texts appear.

merely illustrative texts

javascript html

1 answer

2


If I understand correctly, just create another span with a id within the div#textos2 and hide her in onclick and show on onmouseout:

.descricao{
    display: none;
}
<div id="textos1">
<span class="item"  onclick="document.getElementById('vaga1').style.display='block'; document.getElementById('outrotexto').style.display='none'" onmouseout="document.getElementById('vaga1').style.display='none'; document.getElementById('outrotexto').style.display='block'">Idade</span>
<span class="item"  onclick="document.getElementById('vaga2').style.display='block'; document.getElementById('outrotexto').style.display='none'" onmouseout="document.getElementById('vaga2').style.display='none'; document.getElementById('outrotexto').style.display='block'">Genero</span>
<span class="item"  onclick="document.getElementById('vaga3').style.display='block'; document.getElementById('outrotexto').style.display='none'" onmouseout="document.getElementById('vaga3').style.display='none'; document.getElementById('outrotexto').style.display='block'">Estado</span>
</div>

<div id="textos2">
   <span id="outrotexto">Outro texto</span>
<span class="descricao" id="vaga1">Recomendado a todas as idades</span>
<span class="descricao" id="vaga2">Masculino</span>
<span class="descricao" id="vaga3">Goiás</span>
</div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.