-JQuery- Explicacion

[Jimmy555]

Hola a todos,
estoy empezando a utilizar JQuery pero no consigo ponerlo en funcionamiento.
Me he copiado el código .js de la página e intento utilizarlo en mi página php.
Alguien me puede explicar que pasos debo seguir para poder colocar por ejemplo un Accordion , el código lo utilo de la página http://jqueryui.com/demos/accordion/#method-option

Necesito algo de ayuda por favor.

[hector2c]

hola jimmy555, pues, en mi caso cuando uso el acordeon:

Código HTML:

<script language="javascript" type="text/javascript" src="../extras/js/jquery/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="../extras/js/jquery.ui/ui/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="../extras/js/jquery.ui/ui/ui.accordion.js"></script>
<link rel="stylesheet" type="text/css" href="../extras/js/jquery.ui/themes/redmond/ui.all.css" />
        
<script type="text/javascript">
  $(document).ready(function(){
    $("#accordion").accordion({
      autoHeight: false
    });
  });
</script> 

y el html es el siguiente:

Código HTML:

<div id="accordion">
    <h3><a>¿Que diferencias existen entre principal y descripción?</a></h3>
    <div>
        <p>Existe una gran diferencia, el campo principal indica el texto resumen a mostrar en el listado principal, y descripción el contenido total de lo publicado.</p>
    </div>

    <h3><a>¿Como agrego imagenes al campo descripción?</a></h3>
    <div>
        <p>Debera agregar código HTML, para ello puede copiar el siguiente código.</p>
        <code>
            xD
        </code>
        <p>En caso tenga problemas escriba a webmaster@dominio</p>
    </div>

</div> 

recuerda que no solo estas usando el jquery.js (en mi caso la version 1.3.2), tambien debes agregar los .js de jqueryUI, nos vemos!, tambien ten en cuenta que uso el theme redmond, que es un estilo medio azul :P

[Jimmy555]

Muchas Gracias Hector2c, no me habia descargado nada de esa página.

Saludos

[mayid]

Yo explico lo que puso Hector. Lo primero, en la cabecera, es incluir las librerias y las hojas de estilo:

<script language="javascript" type="text/javascript" src="../extras/js/jquery/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="../extras/js/jquery.ui/ui/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="../extras/js/jquery.ui/ui/ui.accordion.js"></script>
<link rel="stylesheet" type="text/css" href="../extras/js/jquery.ui/themes/redmond/ui.all.css" />

... con rutas relativas.

Luego viene una llamada a las librerias:

<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion({
autoHeight: false
});
});
</script>

... que esta dentro de un domready para que se ejecute como ultima cosa al cargar la pagina.

Luego estan las etiquetas html, en el body.