Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » HTLM5 MOSTRAY Y OCULTAR

HTML - HTLM5 MOSTRAY Y OCULTAR

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

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>1ª</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>2ª </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>3ª</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
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

HTLM5 MOSTRAY Y OCULTAR

Publicado por ScriptShow (409 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
50
<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>1ª</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>2ª </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>3ª</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