Estou criando uma pagina simples em HTML e separei a pagina em duas verticalmente, sendo dessa forma
na parte que está em azul iria o logo e as info da ferramenta (ainda não fiz). Quando eu clico nos botões ele mostras as informações, e mudando conforme mudo de botão.
A minha duvida é: como fazer que o logo e as informações da ferramenta possa "ocultar" ao clicar nos botões?
HTML :
<body>
<div id="conteudo">
<div id="links">
<ul>
<li class="Tela01" onclick="mostraInformacao('lorem')" onclick="">
<img src="btn01.png">
<p>tela 01</p>
</li>
<li class="Tela02" onclick="mostraInformacao('ipsum')">
<img src="btn01.png">
<p>tela 02</p></li>
</ul>
<ul>
<li class="Tela03" onclick="mostraInformacao('lorem')">
<img src="btn01.png">
<p>tela 03</p>
</li>
<li class="Tela04" onclick="mostraInformacao('ipsum')">
<img src="btn01.png">
<p>tela 04</p>
</li>
</ul>
</div>
<div class="Info">
<div id="informacao">
<div class="ocultaMostra">
USHUAHSUASHUAHSUASUASHAUSUASHUSASS
</div>
</div>
<div id="respostas">
<div id="lorem" class="faq">Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem </div>
<div id="ipsum" class="faq">Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum </div>
<div id="lorem" class="faq">Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem </div>
<div id="ipsum" class="faq">Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum </div>
</div>
</div>
</div>
CSS :
#links {
float: left;
max-width: 50%;
}
#links li {
cursor: pointer;
transition: 0.3s ease;
opacity: 0.7;
}
#links li:hover {
opacity: 1;
}
#respostas {
float: right;
max-width: 50%;
}
.faq {
margin: 20px;
color: white;
display: none; /* coloca todos como invisiveis inicialmente */
}
*{
font-family: 'Courier New', Courier, monospace;
}
.ocultaMostra{
display: inline;
color: aliceblue;
}
.Tela01{
display: flex;
position: absolute;
margin-left: 5%;
margin-top: 5%;
}
.Tela02{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 5%;
}
.Tela03{
display: flex;
position: absolute;
margin-left: 5%;
margin-top: 20%;
}
.Tela04{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 20%;
}
.Info{
background: linear-gradient(to bottom , #12304b , black );
position: absolute;
height: 100%;
width: 60%;
margin-left: 40%
}
.NomeDaFerramenta{
font-size: 60px;
margin-left: 60%;
background: transparent;
z-index: 1;
position: absolute;
}
.infoMostrar{
display: none;
}
JS :
function mostraInformacao(id){
respostas = document.getElementsByClassName('faq');
for (var i = 0; i < respostas.length; i++) {
respostas[i].style.display = 'none';
}
clicada = document.getElementById(id);
clicada.style.display = 'inherit';
}
function ocultarInfoPrincipal(id){
informacao = document.getElementsByName('ocultaMostra');
for (var i = 0; i < informacao.length; i++) {
informacao[i].style.display = 'inline';
}
mostraInformacao(informacao);
clicou.style.display = 'none';
}
<div class="ocultaMostra">
?id
repetidos, isso não pode. Vc quer ocultar a divocultaMostra
ao clicar em qualquer botão?ocultaMostra
, mas só existe 1 div com essa classe. Isso que não está dando pra entender.