HTML - HTLM5 MOSTRAY Y OCULTAR

   
Vista:

HTLM5 MOSTRAY Y OCULTAR

Publicado por asiole (2 intervenciones) el 23/07/2017 13:55:44
Tengo estos códigos para MOSTRAR y OCULTAR preguntas y respuestas.
¿cómo puedo poner un color al [-] y otro a `[+]?
¿Cómo puedo cambiar estos signos por iconos?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
 
<script>
function mostrar(enla , etik) {
  obj = document.getElementById(etik);
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
  enla.innerHTML = (enla.innerHTML == '[-]') ? '[+]' : '[-]';
}
</script>
</head>
<body>
 
<!--<div>PRIMERA PREGUNTA</div>-->
 
<p><a href="#" onclick=mostrar(this,'oculto'); return false" />[+]</a></p>
<div id="oculto" style="display:none" span class="ms-rteThemeForeColor-9-3">
PRIMERO 
</div> 



<!--<div>SEGUNDA PREGUNTA</div>-->
<p><a href="#" onclick="mostrar(this,'oculto2'); return false" />[+]</a></p> 
<div id="oculto2" style="display:none" span class="ms-rteThemeForeColor-9-3">
SEGUNDO
</div>
 
 
<!--<div>TERCERA PREGUNTA</div>-->
<p><a href="#" onclick="mostrar(this,'oculto3'); return false" />[+]</a></p>
<div id="oculto3" style="display:none" span class="ms-rteThemeForeColor-9-3">
TERCERO
</div>
 
 
 
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder
Imágen de perfil de ScriptShow

HTLM5 MOSTRAY Y OCULTAR

Publicado por ScriptShow (326 intervenciones) el 25/07/2017 16:00:41
Saludos,

podemos crear dos imágenes del mismo tamaño (24px x 24px.) ó (48px x 48px) Etc... Llamarlas por nombres como (pos.png y neg.png). Le damos el color que queramos a cada imagen.

Hay muchos sitios de imágenes relacionadas, p.e.: https://es.icons8.com/icon/53401/plus-minus Navega...

El código quedaría más o menos así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
 
<head>
 
<script>
function mostrar(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (obj.style.display == 'block') ? '<img src="neg.png" border="0">' : '<img src="pos.png" border="0">';
}
</script>
 
</head>
 
<body>
 
<!--<div>PRIMERA PREGUNTA</div>-->
 
<p><a href="#" onclick=mostrar(this,'oculto'); return false" /><img src="pos.png" border="0"></a></p>

<div id="oculto" style="display:none" span class="ms-rteThemeForeColor-9-3">

PRIMERO 

</div>

<!--<div>SEGUNDA PREGUNTA</div>-->

<p><a href="#" onclick="mostrar(this,'oculto2'); return false" /><img src="pos.png" border="0"></a></p> 
 
<div id="oculto2" style="display:none" span class="ms-rteThemeForeColor-9-3">
 
SEGUNDO
 
</div>
 
<!--<div>TERCERA PREGUNTA</div>-->
 
<p><a href="#" onclick="mostrar(this,'oculto3'); return false" /><img src="pos.png" border="0"></a></p>
 
<div id="oculto3" style="display:none" span class="ms-rteThemeForeColor-9-3">
 
TERCERO
 
</div>
 
</body>
 
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar