funcion accordion jquery, se abra desplegado

[anahilarrosa]

Hola a todos, soy nueva en este foro asi que perdon si no me explico bien.
Estoy armando una pagina y utilice a funcion de accordion de jquery.

pueden ver aqui:
http://newsmilesrl.com.ar/prueba/tratamientos.html

El problema que tengo que me estoy volviendo loca, es que desde la home, tiene que haber links que te lleven directo al tratamiento (de todos los que hay en la lista del menu de jquery) y se abra esa pagina con el tratamiento desplegado, y no todo el menu cerrado.

Espero alguien sepa como ayudarme

desde ya muchisimas gracias!!!!!

[Naahuel]

¡La verdad no entiendo! :P ¿Qué es lo que tiene que aparecer desplegado? ¿Todos los items del acordeón? De ser así podrías incluir esta línea después de iniciar el acordeón:

Código Javascript:

$('.accordionContent').show();
 

Eso te desplegará todos los items. Dudo que sea lo que querés porque entonces le quita todo sentido al acordeón. Si querés desplegar algún item en particular deberías agregar clases a cada DIV con la clase accordionContent de acuerdo al contenido de cada item (implantes, blanqueamiento, etc) de forma de sólo poder hacer:

Código Javascript:

$('.blanqueamiento').show();
 

Podría ser también usar algun estilo inline para ese div indicando display:block;, pero estoy seguro que el script del acordeón lo sobreescribirá y no funcionará.

-edit-
Revisando tu código fuente, en el archivo javascript.js observé esta línea al último:

Código Javascript:

/********************************************************************************************************************
    CLOSES ALL DIVS ON PAGE LOAD
    ********************************************************************************************************************/   
    $("div.accordionContent").hide();
 

Seguramente removiéndola haga que todos inicien abiertos.

[caricatos]

Tema movido desde javascript

[anahilarrosa]

Iniciado por Naahuel

¡La verdad no entiendo! :P ¿Qué es lo que tiene que aparecer desplegado? ¿Todos los items del acordeón? De ser así podrías incluir esta línea después de iniciar el acordeón:

Código Javascript:

$('.accordionContent').show();
 

Eso te desplegará todos los items. Dudo que sea lo que querés porque entonces le quita todo sentido al acordeón. Si querés desplegar algún item en particular deberías agregar clases a cada DIV con la clase accordionContent de acuerdo al contenido de cada item (implantes, blanqueamiento, etc) de forma de sólo poder hacer:

Código Javascript:

$('.blanqueamiento').show();
 

Podría ser también usar algun estilo inline para ese div indicando display:block;, pero estoy seguro que el script del acordeón lo sobreescribirá y no funcionará.

-edit-
Revisando tu código fuente, en el archivo javascript.js observé esta línea al último:

Código Javascript:

/********************************************************************************************************************
    CLOSES ALL DIVS ON PAGE LOAD
    ********************************************************************************************************************/   
    $("div.accordionContent").hide();
 

Seguramente removiéndola haga que todos inicien abiertos.

muchas gracias!
igualmente creo que no es lo que necesito.

Te explico detalladamente:

entro a la web, y me encuentro con la "HOME". Alli clickeo por ejemplo, en la imagen que habla del "blanqueamiento", entonces ese link me llevara a la url, ".../tratamientos.html" .

Necesito que cuando se abra esa pagina ".../tratamientos.html", la parte de blanqueamiento del "accordion" este desplegada, y obviamente las demas queden cerradas.

es posible eso?

:)

[Naahuel]

Iniciado por anahilarrosa

muchas gracias!
igualmente creo que no es lo que necesito.

Te explico detalladamente:

entro a la web, y me encuentro con la "HOME". Alli clickeo por ejemplo, en la imagen que habla del "blanqueamiento", entonces ese link me llevara a la url, ".../tratamientos.html" .

Necesito que cuando se abra esa pagina ".../tratamientos.html", la parte de blanqueamiento del "accordion" este desplegada, y obviamente las demas queden cerradas.

es posible eso?

:)

Es lo segundo que te explico en mi post. Tenés que asignarle alguna clase a tu elemento que quieras mostrar, como ser "activo" o "actual" y luego agregás esto:

Código Javascript:

$('.activo').show();
 

Tenés que agregarlo en alguna parte luego del script del acordeón siempre dentro de:

Código Javascript:

$(function(){
//agregar aca!
});
 

No podés usar css en este caso porque por la forma que el script del acordeón funciona, los estilos de display van a ser sobreescritos.

Saludos!

[InKarC]

Haz que los links especifiquen cual ha sido cliqueado, por ejemplo blanqueamiento: en vez de que la url sea esta .../tratamientos.html, tienes que colocar que el link sea asi: .../tratamientos.html?blanqueamiento y asi con todos los links; luego haces esto para mostrar el div que sea necesario mostrar.

Código Javascript:

$(document).ready(function(){
 
    
    var url= String(window.location).split('?');
    pagina_actual = url[url.length-1];
 
switch(pagina_actual){
    case "blanqueamiento":  
    $("#panel_blanqueamiento").show()
    break   ;
    
    case "arreglo": 
    $("#panel_arreglo").show()
    break   ;
}
 
})
 

Y simplemente dependiendo de la pagina en que estes muestra el DIV que necesitas mostrar; por ejemplo si dice "blanqueamiento" simplemente que muestre el div #panel_blanqueamiento

case "blanqueamiento":
$("#panel_blanqueamiento").show()
break ;

[anahilarrosa]

Iniciado por InKarC

Haz que los links especifiquen cual ha sido cliqueado, por ejemplo blanqueamiento: en vez de que la url sea esta .../tratamientos.html, tienes que colocar que el link sea asi: .../tratamientos.html?blanqueamiento y asi con todos los links; luego haces esto para mostrar el div que sea necesario mostrar.

Código Javascript:

$(document).ready(function(){
 
    
    var url= String(window.location).split('?');
    pagina_actual = url[url.length-1];
 
switch(pagina_actual){
    case "blanqueamiento":  
    $("#panel_blanqueamiento").show()
    break   ;
    
    case "arreglo": 
    $("#panel_arreglo").show()
    break   ;
}
 
})
 

Y simplemente dependiendo de la pagina en que estes muestra el DIV que necesitas mostrar; por ejemplo si dice "blanqueamiento" simplemente que muestre el div #panel_blanqueamiento

Mil gracias por las respuestas... pero todo lo que pruebo no me funciona.... quizas es porq no soy muy experta en esto :(

les paso el javascrit que tengo a ver si hay algo q me esta haciendo interferencia:


$(document).ready(function() {

$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
$('div.accordionButton2').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
$('div.accordionButton3').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});



$("div.accordionContent").hide();


});

[Naahuel]

Yo pensé que había sido claro :P

A ver. Según ví en el código fuente (el cual es imposible de leer así nomás :P), tu estructura para el acordeón es así:

Código HTML:

<div id="wrapper">
    <div id="accordionButtonX">
        //boton
    </div>
    <div id="accordionContent">
        //contenido
    </div>
    ... 
</div>
 

El cual se repite para cada item del acordeón. Lo que tenés que hacer es identificar el DIV con clase "accordionContent" que contiene el elemento que querés mostrar. A ese item, vamos a agregarle la clase "activo". Así:

Código HTML:

<div id="wrapper">
    <div id="accordionButtonX">
        //boton
    </div>
    <div id="accordionContent activo">
        //contenido
    </div>
    ... 
</div>
 

Entonces a tu script (el cual se encuentra en javascript.js) lo deberías modificar de la siguiente manera:

Código Javascript:

$(document).ready(function() {
 
    $('div.accordionButton').click(function() { 
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });
    $('div.accordionButton2').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });
    $('div.accordionButton3').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });
 
    $("div.accordionContent").not('.activo').hide();
 
});
 

Observá que sólo ha cambiado la última línea, usando el método .not() para que NO OCULTE el elemento con clase activo. Eso SI funciona y es extremadamente fácil de aplicar. Acá lo ves que funciona:

http://nahueljose.com.ar/newsmile/

Creo que no puede ser más fácil que eso :P

[InKarC]

vamos a agregarle la clase "activo"

Sospecho que esa es la parte donde tiene problemas... eso se hace desde el lado del servidor.

[anahilarrosa]

aayyyyy mil gracias!!!!!

pero si mal no entiendo... (q puede ser :P) no es eso lo que pregunto. :(

O sea esta bien que se abra desplegado el item pero desde un link que va a estar en la home, que el usuario decide clickear e ir a ese determinado link desplegado....

o sea varia.

soy muy mala explicando? o soy muy mala entendiendo?

en fin.... muy buena onda!

[Naahuel]

¿Entonces el problema es que es siempre la misma página a la que todas las categorías linkean?

Ya veo, entonces el lento entendiendo soy yo :P ¿Tenés posibilidades de usar PHP? Porque de ser así la respuesta de InKarC es lo que necesitás.

[Dany_s]

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:

<div id="contenedor">
    
    <h1 class="titulo">TRATAMIENTOS ODONTOLOGICOS</h1>
 
    <div id="accordion">
 
        <h2>Implantes</h2>
        <div class="accordionContent">
            El contenido del implantes
        </div>
 
        <h2>Blanqueamiento</h2>
        <div class="accordionContent">
            El contenido del Blanqueamiento
        </div>
 
        <h2>Ortodoncia</h2>
        <div class="accordionContent">
            El contenido del Ortodoncia
        </div>
 
    </div>
 
</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:

$( function(){
 
    //algo.com/archivo.html?clave  ('clave' debe ser un numero)
    var indice = String(window.location).split('?')[1];
 
    //Oculto todos los contenidos del acordeon
    $('.accordionContent').hide();
 
    //Le doy un evento a cada h2 que son los titulos de cada tratamiento
    $('#accordion>h2').click(function() {
        //Si activo esta definido quiere decir que hay un contenido abierto, entonces lo cierro
        if ( typeof activo != 'undefined' )
            activo.slideUp();
 
        //Guardo en activo el div accordionContent y a continuacion lo abro
        activo = $(this).next();
        activo.slideDown('normal');
    });
 
    //Lanzo un click en la pestaña segun el indice que obtengo de la url
    $('#accordion>h2:eq('+indice+')').click();
 
});
 

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:

<a href="urlAcordeon.html?0">Implantes</a>
<a href="urlAcordeon.html?1">Blanqueamiento</a>
<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:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script>
 
$( function(){
 
    //algo.com/archivo.html?clave  ('clave' debe ser un numero)
    var indice = String(window.location).split('?')[1];
 
    //Oculto todos los contenidos del acordeon
    $('.accordionContent').hide();
 
    //Le doy un evento a cada h2 que son los titulos de cada tratamiento
    $('#accordion>h2').click(function() {
        //Si activo esta definido quiere decir que hay un contenido abierto, entonces lo cierro
        if ( typeof activo != 'undefined' )
            activo.slideUp();
 
        //Guardo en activo el div accordionContent y a continuacion lo abro
        activo = $(this).next();
        activo.slideDown('normal');
    });
 
    //Lanzo un click en la pestaña segun el indice que obtengo de la url
    $('#accordion>h2:eq('+indice+')').click();
 
});
    </script>
 
    <style>
        #contenedor{width:300px}
        .titulo{font-size:16px; background:#777777; color:#fff}
        h2{font-size:14px; background:#bbbbbb; margin:0}
        .accordionContent{background:#dddddd;}
 
    </style>
 
</head>
<body>
 
<div id="contenedor">
    
    <h1 class="titulo">TRATAMIENTOS ODONTOLOGICOS</h1>
 
    <div id="accordion">
 
        <h2>Implantes</h2>
        <div class="accordionContent">
            El contenido del implantes
        </div>
 
        <h2>Blanqueamiento</h2>
        <div class="accordionContent">
            El contenido del Blanqueamiento
        </div>
 
        <h2>Ortodoncia</h2>
        <div class="accordionContent">
            El contenido del Ortodoncia
        </div>
 
    </div>
 
</div>
 
 
</body>
</html>
 

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

espero que se entienda :P

[anahilarrosa]

AYYYY AHORA SIIII!!!!!
Son unos grandes!!! mil gracias chicos... muy buena ondaaaa :)