Tema: funcion accordion jquery, se abra desplegado
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 07/04/2011, 08:46
Dany_s
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: funcion accordion jquery, se abra desplegado
la mejor opción es la que posteo InKarC aunque yo le mandaria el indice de la pestaña y con eso lanzaria un click

pasa que primero deberias optimizar tu html y tu js

por ejemplo el html podrias hacerlo asi de simple


Código HTML: 
Ver original
  1. <div id="contenedor">
  2.     
  3.     <h1 class="titulo">TRATAMIENTOS ODONTOLOGICOS</h1>
  4.  
  5.     <div id="accordion">
  6.  
  7.         <h2>Implantes</h2>
  8.         <div class="accordionContent">
  9.             El contenido del implantes
  10.         </div>
  11.  
  12.         <h2>Blanqueamiento</h2>
  13.         <div class="accordionContent">
  14.             El contenido del Blanqueamiento
  15.         </div>
  16.  
  17.         <h2>Ortodoncia</h2>
  18.         <div class="accordionContent">
  19.             El contenido del Ortodoncia
  20.         </div>
  21.  
  22.     </div>
  23.  
  24. </div>

y el jquery fijate que actualmente como lo tienes estas agregando lineas por cada item que agregas, con la estructura html que te propongo solo necesitas saber manejarte por ella

el jquery:
Código Javascript: 
Ver original
  1. $( function(){
  2.  
  3.     //algo.com/archivo.html?clave  ('clave' debe ser un numero)
  4.     var indice = String(window.location).split('?')[1];
  5.  
  6.     //Oculto todos los contenidos del acordeon
  7.     $('.accordionContent').hide();
  8.  
  9.     //Le doy un evento a cada h2 que son los titulos de cada tratamiento
  10.     $('#accordion>h2').click(function() {
  11.         //Si activo esta definido quiere decir que hay un contenido abierto, entonces lo cierro
  12.         if ( typeof activo != 'undefined' )
  13.             activo.slideUp();
  14.  
  15.         //Guardo en activo el div accordionContent y a continuacion lo abro
  16.         activo = $(this).next();
  17.         activo.slideDown('normal');
  18.     });
  19.  
  20.     //Lanzo un click en la pestaña segun el indice que obtengo de la url
  21.     $('#accordion>h2:eq('+indice+')').click();
  22.  
  23. });

fijate que el evento click le doy a los h2, el contenido de ese item va a ser el div que le sigue, para acceder a él uso el next(), lo guardo en una variable para saber en el proximo click que debo ocultarlo

para entrar a esa seccion y que esté activa el item que quieres visualizar desde el link que presionaste en una página externa obtengo la bandera como lo propuso InKarC pero envio el índice
cada h2 tiene el evento clic entonces el primer h2 tiene índice 0, el segundo va a ser 1 asi sucesivamente

encontes extraigo el indice pasado por url y la guardo en una variable 'indice'
al final del script lo único que hago es seleccionar el h2 con dicho índice y lanzo el clic, entonces se abre esa sección

te paso todo completo para que lo pruebes

pagina externa con links de ejemplos
Código HTML: 
Ver original
  1. <a href="urlAcordeon.html?0">Implantes</a>
  2. <a href="urlAcordeon.html?1">Blanqueamiento</a>
  3. <a href="urlAcordeon.html?2">Ortodoncia</a>
modifica la url por el nombre del archivo que contiene el acordeón
y prestá atención como se relaciona la url con los bloques del acordeón

url del link Implantes es urlAcordeon.html?0
el indice (posición) del h2 del bloque de la sección de Implantes en el acordeón es 0 (los índices comienzan en 0)

para Blanqueamiento va a ser 1
para Ortodoncia va a ser 2

al obtener ese indice pasado por la url utilizo eso para lanzar un click en el h2 con ese indice

pagina que contiene el acordeón
Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Ejemplo</title>
  4.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  5.         <script>
  6.  
  7. $( function(){
  8.  
  9.     //algo.com/archivo.html?clave  ('clave' debe ser un numero)
  10.     var indice = String(window.location).split('?')[1];
  11.  
  12.     //Oculto todos los contenidos del acordeon
  13.     $('.accordionContent').hide();
  14.  
  15.     //Le doy un evento a cada h2 que son los titulos de cada tratamiento
  16.     $('#accordion>h2').click(function() {
  17.         //Si activo esta definido quiere decir que hay un contenido abierto, entonces lo cierro
  18.         if ( typeof activo != 'undefined' )
  19.             activo.slideUp();
  20.  
  21.         //Guardo en activo el div accordionContent y a continuacion lo abro
  22.         activo = $(this).next();
  23.         activo.slideDown('normal');
  24.     });
  25.  
  26.     //Lanzo un click en la pestaña segun el indice que obtengo de la url
  27.     $('#accordion>h2:eq('+indice+')').click();
  28.  
  29. });
  30.     </script>
  31.  
  32.     <style>
  33.         #contenedor{width:300px}
  34.         .titulo{font-size:16px; background:#777777; color:#fff}
  35.         h2{font-size:14px; background:#bbbbbb; margin:0}
  36.         .accordionContent{background:#dddddd;}
  37.  
  38.     </style>
  39.  
  40. </head>
  41. <body>
  42.  
  43. <div id="contenedor">
  44.     
  45.     <h1 class="titulo">TRATAMIENTOS ODONTOLOGICOS</h1>
  46.  
  47.     <div id="accordion">
  48.  
  49.         <h2>Implantes</h2>
  50.         <div class="accordionContent">
  51.             El contenido del implantes
  52.         </div>
  53.  
  54.         <h2>Blanqueamiento</h2>
  55.         <div class="accordionContent">
  56.             El contenido del Blanqueamiento
  57.         </div>
  58.  
  59.         <h2>Ortodoncia</h2>
  60.         <div class="accordionContent">
  61.             El contenido del Ortodoncia
  62.         </div>
  63.  
  64.     </div>
  65.  
  66. </div>
  67.  
  68.  
  69. </body>
  70. </html>

y por mas que agregues secciones al acordeón no vas a necesitar agregar cosas al jquery

espero que se entienda :P