mostrar ocultar mas de un div con efecto Accordion

  • Autor Autor xaiborweb
  • Fecha de inicio Fecha de inicio
xaiborweb

xaiborweb

Programador
No recomendado
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola compañeros del foro primero que todo les deseo un muy feliz 2013 🙂

bueno lo que quiero es hacer un menú con barios divs ocultos al inicio si solicito 1 se muestre si solicito 2 se cierre 1 y se muestre 2 y vuelvo a dar clip sobre el 2 se vuelva a ocultar y así sucesivamente básicamente el famoso efecto Accordion

e probado muchos plugins y e buscado bastante en la web pero la mayoría usan la condición de un <h3></h3> para identificar el titulo del div a ocultar pero inmediatamente el contenedor siguiente a ese <h3></h3> es el que se oculta

y el problema es que el código que necesito ocultar es el que muestro como <div class="oculto"></div> que requiero que lo active <span><a href="">Opción 1</a></span> de este codigo
<div id="tablas">
<strong>
<p><span>Audio</span><span>Subtitulos</span><span>Servidor</span><span>Formato</span><span>Calidad</span><span>Ver Online</span><span>Uploader</span></p>
</strong>
<p>
<span class="es_ES" title="español"></span>
<span class="no_subtitulada" title="no_subtitulada"></span>
<span><a href="">Opción 1</a></span>
<span class="formato">HD 720px</span>
<span class="calidadfull_HD" title="calidadfull_HD"></span>
<span class="vidbux" title="vidbux"></span>
<span>xaiborweb</span>
</p>
<div class="oculto" style="display: block;">5 LINK<br/>
**********
<br/><a href="#" title="PARTE 1" target="_blank">PARTE 1</a>
<br/><a href="#" title="PARTE 2" target="_blank">PARTE 2</a>
<br/><a href="#" title="PARTE 3" target="_blank">PARTE 3</a>
<br/><a href="#" title="PARTE 4" target="_blank">PARTE 4</a>
<br/><a href="#" title="PARTE 5" target="_blank">PARTE 5</a>
<br/>
</div>
</div>
Hacer clic para expandir...

esta es solo una linea de código la cual se repetirá "n" veces para cada post con efecto Accordion

espero me puedan echar una mano compañeros si lo requieren le posteo el css y los script y jquery que e intentado

gracias y saludos 🙂
 
lombervid dijo:
Aqui esta Accordion | jQuery UI 😛7:

- - - Actualizado - - -

creo que ya vi que dices q ese no xD
Hacer clic para expandir...


gracias por responder amigo pero si como dije

"e probado muchos plugins y e buscado bastante en la web pero la mayoría usan la condición de un <h3></h3> para identificar el titulo del div a ocultar pero inmediatamente el contenedor siguiente a ese <h3></h3> es el que se oculta"

y si te fijas el formulario html que tengo el contenido inmediatamente después es <span class="formato">HD 720px</span> y es ese el cual el oculta no el que requiero que es <div class="oculto"></div>

en la única parte donde e visto que tienen un script como el que yo necesito es en las tablas de los servidores al ver una pelicula en tucinecom y me e fijado que ellos utilizan <span><a href="#div_1_e" class="MO">Opción 1</a></span> donde ese #div_1_e es unico y asi se llama el id oculto de tal manera que en los siguientes lineas ya utilizan otro ejemplo <a href="#div_2_e" class="MO">Opción 2</a> y así sucesivamente.

pero el problema es que como mi conocimiento de javascript y jquery es muy básico no e logrado hacer ese script gracias 🙂
 
Última edición:
Pero ahi el contenido a ocultar esta seguido de donde le dan click, no? cuando menos eso veo yo xD si pones una imagen para ver donde dices seria mejor.

Ahora con js lo que podrias hacer es por ejemplo ponerle un evento onclick o con href al que quieres que oculte y algo como esto (si mal no recuerdo):

HTML: 
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" language="javascript">
			function show(id) {
				var oc = document.getElementById(id).style;
				hide();
				oc.display = "block";
			}
			
			function hide() {
				document.getElementById('ocultar').style.display = "none";
				document.getElementById('ocultar2').style.display = "none";
				document.getElementById('ocultar3').style.display = "none";
			}
		</script>
		<style type="text/css">
			.oculto {
				display: none;
			}
			span {
				color: green;
				font-size: 20px;
			}
			div {
				color: gray;
			}
		</style>
	</head>
	<body>
		<a href="javascript:show('ocultar')" style="cursor: hand; text-decoration: none"><h3>Ocultar<h3></a>
		<a href="javascript:show('ocultar2')" style="cursor: hand; text-decoration: none"><h3>Ocultar 2<h3></a>
		<a href="javascript:show('ocultar3')" style="cursor: hand; text-decoration: none"><h3>Ocultar 3<h3></a>
		
		<span>Seccion 1<span><br />
		<div id="ocultar" class="oculto">
			hola
		</div>
		<span>Seccion 1<span><br />
		<div id="ocultar2" class="oculto">
			que hay de nuevo
		</div>
		<span>Seccion 1<span><br />
		<div id="ocultar3" class="oculto">
			creo que nada
		</div>
	</body>
</html>.

Saludos!! 😛7:
 
Última edición:
lombervid dijo:
Pero ahi el contenido a ocultar esta seguido de donde le dan click, no? cuando menos eso veo yo xD si pones una imagen para ver donde dices seria mejor.

Ahora con js lo que podrias hacer es por ejemplo ponerle un evento onclick o con href al que quieres que oculte y algo como esto (si mal no recuerdo):

Saludos!! 😛7:
Hacer clic para expandir...

por eso brother que todo lo que se encuentra en la red es básicamente lo mismo script que ocultan inmediatamente el contenedor siguiente y eso es lo que no me servia a mi ya que lo que estaba elaborando era un menú multiple opciones en un tabla en la cual si daban clip en opción se desplegara el div oculto

bueno pero después de tanto buscar y buscar me di cuenta que no iba a seguir mas contra la corriente asi que busque uno de esos scripts que ocultan inmediatamente el div siguiente y lo adapte para que me prestara un servicio si bien no exacto al que yo quería si muy parecido el scrip que utilice fue

Stupid Simple jQuery Accordion Menu | Stemkoski

y la otra semana subo la pagina a un hosting para que vean como quedo

muchas gracias por toda la ayuda que brindan 🙂
 
Pues si el ejemplo que te deje en codigo no era lo que buscabas (claro que solo era el funcionamiento, tú le tenias que poner los estilos para que se viera bonito 😀) ahora si que no se que era lo que querias hacer :ambivalence:

Saludos!!

xaiborweb dijo:
por eso brother que todo lo que se encuentra en la red es básicamente lo mismo script que ocultan inmediatamente el contenedor siguiente y eso es lo que no me servia a mi ya que lo que estaba elaborando era un menú multiple opciones en un tabla en la cual si daban clip en opción se desplegara el div oculto

bueno pero después de tanto buscar y buscar me di cuenta que no iba a seguir mas contra la corriente asi que busque uno de esos scripts que ocultan inmediatamente el div siguiente y lo adapte para que me prestara un servicio si bien no exacto al que yo quería si muy parecido el scrip que utilice fue

Stupid Simple jQuery Accordion Menu | Stemkoski

y la otra semana subo la pagina a un hosting para que vean como quedo

muchas gracias por toda la ayuda que brindan 🙂
Hacer clic para expandir...
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

M
Mostrar/ocultar div con id aleatorio
Respuestas
2
Visitas
782
matuha
M
deskpro123
Mostrar/Ocultar Div con un Código Mejorado
Respuestas
6
Visitas
1K
jazhiel
J
Atrás
Arriba