Hide information with javascript [DUVIDA] [closed]

Navigation
0

I'm creating a simple HTML page and I split the page in two vertically, so

In the part that is in blue would the logo and the info of the tool (I have not done yet). When I click the buttons it shows the information, and changing it as the button changes.

My question is: How do you make the logo and tool information "hide" by clicking on the buttons?

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'; 
}
    
asked by anonymous 04.11.2018 / 18:04

1 answer

1

If I understand correctly, I'll come up with a suggestion:

What I changed was to add unique IDs to the response divs and used Jquery.

HTML: 

<div id="conteudo">
            <div id="links">
                <ul>
                <li class="Tela01" onclick="mostraInformacao('tela1')" onclick="">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png"><p>tela01</p></li><liclass="Tela02" onclick="mostraInformacao('tela2')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png"><p>tela02</p></li></ul><ul><liclass="Tela03" onclick="mostraInformacao('tela3')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png"><p>tela03</p></li><liclass="Tela04" onclick="mostraInformacao('tela4')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png"><p>tela04</p></li></ul></div><divclass="Info">  
           <div id="informacao">
               <div class="ocultaMostra">
                    USHUAHSUASHUAHSUASUASHAUSUASHUSASS
               </div>
           </div>       
           <div id="respostas">
               <div id="tela1" class="faq">Tela 1</div>
               <div id="tela2" class="faq">Tela 2</div>
               <div id="tela3" class="faq">Tela 3</div>
               <div id="tela4" class="faq">Tela 4</div>
           </div>
        </div>    
    </div>

JQuery: 

window.mostraInformacao = function (idObj) 
{
    $("#informacao").hide();
  $("#respostas div[class='faq']:visible").hide();

    $("#" + idObj).show();
}

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;
}

Running on: link

    
05.11.2018 / 14:05
Combo Select does not work Keywords with Jquery