Hide information with javascript [DOUBT]

Asked

Viewed 140 times

0

I am creating a simple HTML page and I separated the page into two vertically, so this wayinserir a descrição da imagem aqui

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

My question is this: how to make the logo and information of the tool can "hide" by clicking 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'; 
}
javascript html css html5 css3

  • I really could not understand what you want to do. Try to explain better with more clarity. Each button will have a <div class="ocultaMostra">?

  • @sam, no, the idea is basically to assemble as if it were a menu, where after I click on one of the buttons would go for information regarding the button. I’m just having a hard time getting the "main screen" button to change to button information

  • Right. Just that you’re wearing id repeated, this cannot. You want to hide the div ocultaMostra by clicking any button?

  • You’re also making a loop in the class ocultaMostra, but there is only 1 div with this class. This is not giving to understand.

  • Study Jquery, with it you can do what you want

1 answer

1


If I understand correctly, I will make a suggestion:

What I changed was to add unique Ids to the reply Ids and I 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>tela 01</p>
                </li>
                <li class="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>tela 02</p></li>
                </ul>
                <ul>
                <li class="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>tela 03</p>
                </li>
                <li class="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>tela 04</p>
                </li>
                </ul>

            </div>
       <div class="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;
}

Functioning in: https://jsfiddle.net/s0qbz4ex/

Browser other questions tagged javascript html css html5 css3

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