JavaScript - Mostrar y ocultar

   
Vista:

Mostrar y ocultar

Publicado por matuha (9 intervenciones) el 07/11/2015 15:37:33
Hola!! Estoy muy verde con javascript esto es un ejemplo que conseguí buscando por san Google y lo he adaptado un poco a lo que quiero... con esto consigo mostrar o ocultar un div.. uno de ellos muestra productos y el otro comentarios lo que quiero conseguir es que al visualizar el div de comentarios me oculte el de productos si este esta siendo mostrado, o cuando visualice el de productos, entonces me oculte el de comentarios, si esta siendo mostrado.

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
<script language="JavaScript">
function mo_productos(id){
if (document.getElementById){
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
mo_productos('cont_productos');
}
function oculta(id)
{
var el = document.getElementById(id);
document.getElementById("cont_productos").style.display = "none";
}
 
function mo_comentarios(id){
if (document.getElementById){
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
mo_comentarios('cont_comentarios');
}
function oculta(id)
{
var el = document.getElementById(id);
document.getElementById("cont_comentarios").style.display = "none";
}
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Mostrar y ocultar

Publicado por xve (1595 intervenciones) el 08/11/2015 08:08:47
Hola Matuha, creo que seria algo así:

1
2
3
4
5
6
7
8
function mo_productos(id,idComentario) {
	if (document.getElementById) {
		var producto = document.getElementById(id);
		producto.style.display = (producto.style.display == 'none') ? 'block' : 'none';
		var comentario = document.getElementById(idComentario);
		comentario.style.display = (comentario.style.display == 'none') ? 'block' : 'none';
	}
}

Lo que pasa, es que tienes que enviar el id del producto y el id del comentario a la función... no se si te sirve...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Mostrar y ocultar

Publicado por matuha (9 intervenciones) el 08/11/2015 11:50:55
Hola lo tengo así y no funciona... sigue funcionando igual, si muestro el div productos, al mostrar el div comentarios el div productos no se oculta...

1
2
3
4
5
6
7
8
9
10
<script language="JavaScript">
function muestra_oculta(id,idComentario) {
	if (document.getElementById) {
		var producto = document.getElementById(id);
		producto.style.display = (producto.style.display == 'none') ? 'block' : 'none';
		var comentario = document.getElementById(idComentario);
		comentario.style.display = (comentario.style.display == 'none') ? 'block' : 'none';
	}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="content-resultados" onclick="muestra_oculta('id<? echo $cont; ?>')">
Productos
</div>
<div class="content-opiniones" onclick="muestra_oculta('idComentarios<? echo $cont; ?>')">
Comentarios
</div>
 
<div id="id<? echo "$cont"; ?>" style="display:none;">
Contenido productos...
</div>
<div id="idComentarios<? echo "$cont"; ?>" style="display:none;">
Contenido Comentarios...
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Mostrar y ocultar

Publicado por xve (1595 intervenciones) el 08/11/2015 21:15:38
Hola Matuha, pero tienes que pasar los dos parámetros a la función... algo así:
1
<div class="content-resultados" onclick="muestra_oculta('id<? echo $cont; ?>', 'idComentarios<? echo $cont; ?>')">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Mostrar y ocultar

Publicado por matuha (9 intervenciones) el 09/11/2015 15:55:21
Gracias por tu ayuda xve, te comento, lo tengo tal como dices y no funciona como quisiera..

al hacer click en este div, visualiza los dos div si estan ocultos y al volver hacer click los oculta si no lo están:

1
<div class="content-resultados" onclick="muestra_oculta('id<? echo $cont; ?>', 'idComentarios<? echo $cont; ?>')">

Al hacer click en este sucede lo mismo:

1
<div class="content-productos" onclick="muestra_oculta('id<? echo $cont; ?>', 'idComentarios<? echo $cont; ?>')">

lo que yo quiero es que si hago click en el div "content-resultados" este solo me visualice uno y entonces si seguidamente hago click en "content-productos" este me visualice el otro div y oculte el div que visualiza content-resultados si no esta oculto.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Mostrar y ocultar

Publicado por xve (1595 intervenciones) el 09/11/2015 20:45:20
Hola, al copiarte el código me olvide de invertirlos... tendría que ser así:
1
2
3
4
5
6
7
8
function mo_productos(id,idComentario) {
	if (document.getElementById) {
		var producto = document.getElementById(id);
		producto.style.display = (producto.style.display == 'none') ? 'block' : 'none';
		var comentario = document.getElementById(idComentario);
		comentario.style.display = (comentario.style.display == 'none') ? 'none' : 'block;
	}
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de matuha

Mostrar y ocultar

Publicado por matuha (4 intervenciones) el 10/11/2015 10:40:08
hola xve, ahora se soluciono lo anterior pero aun no funciona como quisiera, si muestro el div id, al mostrar el div idComentarios el div id no se oculta.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar