Tema: [Ayuda] Spoiler Html (Leído 278 veces)

Caobiita! · « **en:** 06 de Marzo de 2010, 15:39:26 »

Hola Phperos, me he descargado un spoiler que cuenta con dos partes, una la parte del código html y otra la parte del código del script, aquí os lo pongo:

CÓDIGO HTML

Código: [Seleccionar]

<div id="ver_on1"><h1 id="titu"><a href="#" onclick="mostrar1('bloque1')" title="Expandir info">Expandir</a></h1>
<p class="copete">Haga click en el t&iacute;tulo para axpandir la informaci&oacute;n</p>
</div>
<div id="ver_off1" style="display: none"><h1><a href="#" onclick="ocultar1('bloque1')" title="Cerrar info">Contraer</a></h1>
</div>
<div id="bloque1" style="display: none">
<p id="txt">Texto oculto que ahora se ve :)</p>
</div>

CÓDIGO DEL SCRIPT

Código: [Seleccionar]

<script type="text/javascript">
//Ocultar/Mostrar Div's
OCULTO="none";
VISIBLE="block";
  function mostrar1(blo) {
    document.getElementById(blo).style.display=VISIBLE;
    document.getElementById('ver_off1').style.display=VISIBLE;
    document.getElementById('ver_on1').style.display=OCULTO;
    }
  function ocultar1(blo) {
    document.getElementById(blo).style.display=OCULTO;
    document.getElementById('ver_off1').style.display=OCULTO;
    document.getElementById('ver_on1').style.display=VISIBLE;
    }
</script>

Este spoiler consiste que mediante un botón/texto oculte o no un texto/imagen.

Bien, pues yo lo he puesto en un archivo php, llamado index.php y me funciona, pero ahora ese spoiler yo lo quiero repetir otra vez en el mismo index.php, pues pongo otra vez el mismo codigo html y cuando lo subo y tal, le doy al segundo spoiler y me abre el primero

¿Qué puedo hacer para que el primero habra el primero y el segundo habra el segundo xD? Gracias y Saludos

Kevin Wronski · « **Respuesta #1 en:** 06 de Marzo de 2010, 15:52:31 »

Primero que nada, esto va en JavaScript.

Segundo, el código es muy tonto, se podría hacer la siguiente función:

function mostrar(obj)
{
if(document.getElementById(obj).style.display == none)
{
document.getElementById(obj).style.display = "block";
}
else
{
document.getElementById(obj).style.display = "none";
}
}

Caobiita! · « **Respuesta #2 en:** 06 de Marzo de 2010, 15:57:53 »

Pues irá en Javascript, perdón, y aunque el código sea muy tonto, yo no he preguntado ¿Este código está bien?. Porque el código ese funciona perfectamente y sin embargo he probado el tuyo y no va

Así que no me has respondido a nada de lo que yo necesito ayuda porque yo no he pedido que me deis otra vez el código simplificado y mejor hecho :S

westwest · « **Respuesta #3 en:** 06 de Marzo de 2010, 16:22:19 »

Cita de: Caobiita! en 06 de Marzo de 2010, 15:57:53

Pues irá en Javascript, perdón, y aunque el código sea muy tonto, yo no he preguntado ¿Este código está bien?. Porque el código ese funciona perfectamente y sin embargo he probado el tuyo y no va

Así que no me has respondido a nada de lo que yo necesito ayuda porque yo no he pedido que me deis otra vez el código simplificado y mejor hecho :S

Menos humos...
La solución *****a para esto, es duplicar las funciones, añadir otro mostrar2 y ocultar2 y cambiar en los links el numero...

Caobiita! · « **Respuesta #4 en:** 06 de Marzo de 2010, 16:25:07 »

Perdón, quizas me he pasado un poco, me disculpo.

---------

¿Entonces tengo que poner otra vez el código del script en el index.php cambiando el mostrar1 por mostrar2 y ocultar1 por ocultar2?

Gracias.

Kevin Wronski · « **Respuesta #5 en:** 06 de Marzo de 2010, 16:26:36 »

Exactamente, yo solo lo digo por mejorar y no crear crispación

Caobiita! · « **Respuesta #6 en:** 06 de Marzo de 2010, 17:07:28 »

Buenas otra vez, hice lo que ustedes me dijeron y el segundo spoiler, me sigue abriendo el primero, hice lo siguiente:

Código: [Seleccionar]

<html>

<head>

<script type="text/javascript">
//Ocultar/Mostrar Div's
OCULTO="none";
VISIBLE="block";
  function mostrar1(blo) {
    document.getElementById(blo).style.display=VISIBLE;
    document.getElementById('ver_off1').style.display=VISIBLE;
    document.getElementById('ver_on1').style.display=OCULTO;
    }
  function ocultar1(blo) {
    document.getElementById(blo).style.display=OCULTO;
    document.getElementById('ver_off1').style.display=OCULTO;
    document.getElementById('ver_on1').style.display=VISIBLE;
    }
</script>

<script type="text/javascript">
//Ocultar/Mostrar Div's
OCULTO="none";
VISIBLE="block";
  function mostrar2(blo) {
    document.getElementById(blo).style.display=VISIBLE;
    document.getElementById('ver_off1').style.display=VISIBLE;
    document.getElementById('ver_on1').style.display=OCULTO;
    }
  function ocultar2(blo) {
    document.getElementById(blo).style.display=OCULTO;
    document.getElementById('ver_off1').style.display=OCULTO;
    document.getElementById('ver_on1').style.display=VISIBLE;
    }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Script</title>

</head>

<body>

<div align="center">
	<table border="0" width="713" cellspacing="0" cellpadding="0" height="186">
		<tr>
			<td valign="top" width="379"><div id="ver_on1"><h1 id="titu"><a href="#" onclick="mostrar1('bloque1')" title="Expandir info">Expandir</a></h1>
<p class="copete">Haga click en el t&iacute;tulo para axpandir la informaci&oacute;n</p>
</div>
<div id="ver_off1" style="display: none"><h1><a href="#" onclick="ocultar1('bloque1')" title="Cerrar info">Contraer</a></h1>
</div>
<div id="bloque1" style="display: none">
<p id="txt">Texto oculto que ahora se ve :)</p>
</div></td>
			<td valign="top"><div id="ver_on1"><h1 id="titu"><a href="#" onclick="mostrar2('bloque1')" title="Expandir info">Expandir</a></h1>
<p class="copete">Haga click en el t&iacute;tulo para axpandir la informaci&oacute;n</p>
</div>
<div id="ver_off1" style="display: none"><h1><a href="#" onclick="ocultar2('bloque1')" title="Cerrar info">Contraer</a></h1>
</div>
<div id="bloque1" style="display: none">
<p id="txt">Texto oculto que ahora se ve :)</p>
</div></td>
		</tr>
	</table>
</div>

</body>

</html>

Y.. aquí os dejo la vista previa para que comprobeis que el primero abre el primero y el segundo abre el primero xD:

http://spoiler.webcindario.com/index.html

westwest · « **Respuesta #7 en:** 06 de Marzo de 2010, 17:14:57 »

Dije que en el link tienes que editarlo tambien... sigue habiendo un 1, al igual que en la funcion

Caobiita! · « **Respuesta #8 en:** 06 de Marzo de 2010, 17:20:03 »

Cita de: westwest en 06 de Marzo de 2010, 17:14:57

Dije que en el link tienes que editarlo tambien... sigue habiendo un 1, al igual que en la funcion

¿Te refieres al code html o al del script?

Yo solo cambie el mostrar1 por mostrar2 y ocultar1 por ocultar2 en el code del script y en el code html.

westwest · « **Respuesta #9 en:** 06 de Marzo de 2010, 23:30:03 »

Más sencillo, cada 1 que veas, lo cambias a un 2

Caobiita! · « **Respuesta #10 en:** 06 de Marzo de 2010, 23:49:56 »

Gracias westwest, ya me funciona, por ser yo tan cabezotas que no entendía bien lo que me decías y por tu esfuerzo de explicarmelo varias veces, te doy un + por esta simple ayuda

EDITO: Me funciona en Google Chrome pero en Mozilla Firefox no me funciona, en Mozilla el segundo spoiler no me hace nada y el primero si me funciona

Caobiita! · « **Respuesta #11 en:** 07 de Marzo de 2010, 00:20:16 »

PERDÓN POR DOBLE POST.

Ya me funciona en Mozilla Firefox, era que al navegador no le daba la gana de actualizarse xDD, tuve que reiniciar el navegador y todo xDD, gracias a todos los que me ayudaron y westwets ya tienes tu karma

Noticias:

Autor Tema: [Ayuda] Spoiler Html (Leído 278 veces)

Caobiita!

[Ayuda] Spoiler Html

Comunidad PHPeros

[Ayuda] Spoiler Html

Kevin Wronski

Re:[Ayuda] Spoiler Html

Caobiita!

Re:[Ayuda] Spoiler Html

westwest

Re:[Ayuda] Spoiler Html

Caobiita!

Re:[Ayuda] Spoiler Html

Kevin Wronski

Re:[Ayuda] Spoiler Html

Caobiita!

Re:[Ayuda] Spoiler Html

westwest

Re:[Ayuda] Spoiler Html

Caobiita!

Re:[Ayuda] Spoiler Html

westwest

Re:[Ayuda] Spoiler Html

Caobiita!

Re:[Ayuda] Spoiler Html

Caobiita!

Re:[Ayuda] Spoiler Html