Hola!
Ando de autodidacta (como casi siempre lo he hecho) tratando de meter código jquery en un programa llamado LEctora que sirve para hacer e-learning (perdón por la introducción, pero creo es necesaria).
El programa si logra hacer que funcionen los efectos con JQuery. De hecho descarge una librería (o como sea que se llame) de la página de jQuery. El efecto en sí es el de acordeón y funciona bien. Para esto el programa requiere 3 cosas:
Una hoja con los componente JQ a utilizar:
<link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
Otra hoja con las funciones (así le llamo, perdón si no es el nombre correcto) a realizar:
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
Estas dos "páginas" van en la cabecera del programa. Por último, dentro del cuerpo del e-learning se manda llamar al efecto a utilizar, en este caso:
<!-- Accordion -->
<div id="accordion">
<div><h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
Y funciona! El problema viene cuando trato de colocar 2 acordeones en la misma página.
Desconozco muchas cosas (en pocas palabras se programar, pero no JQuery), pero entiendo que lo que necesito es tener la clase acordeón y de esa manera la pueda llamar cuantas veces quiera. Lo que veo en el código con el que cuento es que el "acordeón" en la línea 2 no es una clase, o más bien es algo como esto que entontré buscando una respuesta:
Clases para ID
Otro tipo de clases son las CLASES sobre ID, que se caracterizan por que en su definición se emplea un numeral al inicio “#” y el control que lo utiliza no usa la propiedad CLASS sino que emplea el ID del control. una característica de este tipo de definición es que solo puede ser empleado en 1 control (un ID)
Creo entender que lo que debería de hacer es una clase "acordeón" y replicarla cuantas veces quiera en mi archivo. El problema es que revisé dentro de la hoja de estilo y encontré esto:
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }
Esto creo no es una clase, si pudieran echarme una mano para, o hacer esta clase en el CSS y poder replicarla libremente o en de plano regañarme porque mi lógica no tiene nada que ver con el funcionamiento real del Jq :). Mi duda real, ¿dónde creo la clase? (en el CSS, creo) Y si es así, ¿cómo la creo? Si existiera otra forma de resolverlo les agradecería mucho su ayuda.
Espero no haberlos confundido.
Gracias por la ayuda.
Saludos.
