I need invisible text to be visible in javascript

Question

I need invisible text to be visible in javascript

Navigation

#1 by (0 votes)

-1

My problem is this: I need invisible text to be visible when the user clicks on the image. So far so good, but I can not get the text to start invisible on the page .. This is my program (these are signs):

<script language = "javascript">
function mudar(id) {
        var display = document.getElementById(id).style.display;
        if(display == "none")
            document.getElementById(id).style.display = 'block';
		else
			document.getElementById(id).style.display = 'none';
             
	}
</script>
<body>
<div style = "text-align: center;" id = "imagens">
imagens...
.
.
.
</div>

<p><a href = "javascript:mudar('aquario')"></a></p>
<div id = "aquario">
<p>Texto....</p>
 </div>

<p><a href = "javascript:mudar('aries')"></a></p>
<div id = "aries">
<p>Texto....</p>
 </div>  //etc..
</body>

It's almost the way I want it, but when the page loads, the text that should be invisible is visible, when I click on the image it disappears and if I click it it reappears, but I need the page to be invisible. I did not find any solution to my problem. I hope someone can help me! Thank you! Note: I can not run the program because I did not put all the details, I just put the information I needed for the information.

javascript visibilidade

asked by anonymous 09.12.2017 / 05:12

1 answer

How to generate a file in Excel and save to a folder with php How to make a class to handle Graphics2D in paint?

score 0 · Accepted Answer

1 - add this css display:none" to divs

<div id="aquario" style="display:none">
<div id="aries" style="display:none">
.....................................
.....................................

2 - The onclick="mudar()" event directly in images

<img .....  onclick="mudar('aquario')">
<img .....  onclick="mudar('aries')">
.....................................
.....................................

3 - these lines

 <p><a href = "javascript:mudar('aquario')"></a></p>
 <p><a href = "javascript:mudar('aries')"></a></p>
 .................................................
 ................................................

are unnecessary

Example

function mudar(id) {
        var display = document.getElementById(id).style.display;
        if(display == "none")
            document.getElementById(id).style.display = 'block';
        else
            document.getElementById(id).style.display = 'none';
    }

 <!DOCTYPE html>
<div style = "text-align: center;" id="imagens">
<img border="0" src="https://i.stack.imgur.com/jtV5d.png"width="33" height="42" onclick="mudar('aquario')">
<img border="0" src="https://i.stack.imgur.com/xDmzy.png"width="33" height="42" onclick="mudar('aries')">
</div>


<div id="aquario" style="display:none">
<p>Vai sobrar disposição para correr atrás de suas metas. Mudanças no visual podem render elogios. Uma amizade pode atravessar altos e baixos: paciência! Sexo em alta, mas fuja de brigas. Palpites: 15, 96 e 78. Cor: azul-claro.</p>
 </div>

<div id="aries" style="display:none">
<p>Imprevistos podem surgir: vá com calma e preste atenção em tudo o que fizer. Na vida a dois, seu amor pode estar precisando da sua ajuda. Na cama, porém, a paixão vai pegar fogo! Palpites: 05, 14 e 95. Cor: azul-marinho.</p>
 </div>

Workaround Can do only with CSS, using the selector target:

div { display: none }         /* Por padrão, os divs iniciam ocultos. */
div:target { display: block } /* Exibe quando o elemento é alvo. */

<a href='#aquario'>
  <img border="0" src="https://i.stack.imgur.com/jtV5d.png"width="33" height="42">

</a>
<a href='#aries'>
<img border="0" src="https://i.stack.imgur.com/xDmzy.png"width="33" height="42">
</a>

<div id='aquario'>
  <p>Vai sobrar disposição para correr atrás de suas metas. Mudanças no visual podem render elogios. Uma amizade pode atravessar altos e baixos: paciência! Sexo em alta, mas fuja de brigas. Palpites: 15, 96 e 78. Cor: azul-claro.</p>
</div>
<div id='aries'>
  <p>Imprevistos podem surgir: vá com calma e preste atenção em tudo o que fizer. Na vida a dois, seu amor pode estar precisando da sua ajuda. Na cama, porém, a paixão vai pegar fogo! Palpites: 05, 14 e 95. Cor: azul-marinho.</p>
</div>