--JQuery--accordion

[Jimmy555]

Hola!!
tengo unas dudas de como configurar el accordion para que cuando abra uno no se cierre otro, es decir, que lo abra y cierra manualmente.

El código que tengo me lo he bajado de la página http://jqueryui.com/demos/accordion/#collapsible

¿Me podéis ayudar a configurar el código, que tengo que hacer?

[mayid]

Es raro lo que decís porque así es el comportamiento basico de un acordion. Mira, saco esto de la pagina que distes vos:

An accordion doesn't allow more than one content panel to be open at the same time

En fin, lo que tenes que hacer es cargar las librerias (jquery, jquery UI, y opcionalmente UI effects si queres animaciones especiales).

En la pagina tenes el html que necesitas. Luego es simplemente hacerle una llamada desde una función:

<script type="text/javascript">
$(function() {
$("#accordion").accordion();
});
</script>

[hector2c]

lalalala:

Código PHP:

  <script language="javascript" type="text/javascript" src="extras/js/jquery/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("#acordeon>div").hide();
        $("#acordeon>h1").addClass('aco_titulo');
        $("#acordeon>div").addClass('aco_contenido');
        $("#acordeon>h1").click(function(){
            $(this).next('div').slideToggle();
        });
    });
</script> 
  

el estilo

Código HTML:

<style type="text/css">
	#acordeon{
		font-family: "Lucida Sans Unicode";
		font-size: 11px;
	}
	p{
		margin: 0px 0px 20px 0px;
	}
	.aco_titulo{
		font-family: "Lucida Sans Unicode";
		font-size: 11px;
		margin: 0px;
		color: #fff;
		cursor: pointer;
		background-color: #06f;
		padding: 8px;
	}
	.aco_contenido{
		padding: 20px 20px 0px 20px;
		border: 1px solid #06f;
		border-top: 0px;
	}
</style> 

el html

Código HTML:

<div id="acordeon">

    <h1>Conejo</h1>
    <div>
        <p>Tradicionalmente se consideraban dos subespecies: O. cuniculus cuniculus (Linnaeus, 1758), extendido por toda la Pen&iacute;nsula Ib&eacute;rica, y O. cuniculus huxleyi, conocida tambi&eacute;n como O. cuniculus algirus (Haeckel, 1874), restringido a Galicia, Portugal, suroeste de Espa&ntilde;a y norte de &Aacute;frica. &Eacute;sta &uacute;ltima subespecie es m&aacute;s primitiva, peque&ntilde;a y menos robusta que la primera y se supone que su introducci&oacute;n en &Aacute;frica se debe a la acci&oacute;n del hombre. Est&aacute; protegida en las islas del Mediterr&aacute;neo y Atl&aacute;ntico.[4]</p>
        <p>Se considera que las razas dom&eacute;sticas descienden de la subespecie O. cuniculus cuniculus.</p>
    </div>

    <h1>Aqui viene el titulo 2</h1>
    <div>
        <p>Tradicionalmente se consideraban dos subespecies: O. cuniculus cuniculus (Linnaeus, 1758), extendido por toda la Pen&iacute;nsula Ib&eacute;rica, y O. cuniculus huxleyi, conocida tambi&eacute;n como O. cuniculus algirus (Haeckel, 1874), restringido a Galicia, Portugal, suroeste de Espa&ntilde;a y norte de &Aacute;frica. &Eacute;sta &uacute;ltima subespecie es m&aacute;s primitiva, peque&ntilde;a y menos robusta que la primera y se supone que su introducci&oacute;n en &Aacute;frica se debe a la acci&oacute;n del hombre. Est&aacute; protegida en las islas del Mediterr&aacute;neo y Atl&aacute;ntico.[4]</p>
        <p>Se considera que las razas dom&eacute;sticas descienden de la subespecie O. cuniculus cuniculus.</p>
    </div>

    <h1>Aqui viene el titulo 3</h1>
    <div>
        <p>Tradicionalmente se consideraban dos subespecies: O. cuniculus cuniculus (Linnaeus, 1758), extendido por toda la Pen&iacute;nsula Ib&eacute;rica, y O. cuniculus huxleyi, conocida tambi&eacute;n como O. cuniculus algirus (Haeckel, 1874), restringido a Galicia, Portugal, suroeste de Espa&ntilde;a y norte de &Aacute;frica. &Eacute;sta &uacute;ltima subespecie es m&aacute;s primitiva, peque&ntilde;a y menos robusta que la primera y se supone que su introducci&oacute;n en &Aacute;frica se debe a la acci&oacute;n del hombre. Est&aacute; protegida en las islas del Mediterr&aacute;neo y Atl&aacute;ntico.[4]</p>
        <p>Se considera que las razas dom&eacute;sticas descienden de la subespecie O. cuniculus cuniculus.</p>
    </div>

</div> 

Te ahorras cargar tooodo el ui jejejeje

[Rafael]

Retomo este post... ya que tengo el mismo problema y no está resuelto. : )
Si alguien, como en libro de "colorea por números" me ayuda con esto O sea a prueba de burros como yo.

El HTML básico que usa el Jquery UI accordion es:

Código PHP:

  <div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div> 
   

Separo el tema en diferentes opciones:
1) Usar el código de esa misma documentación.

En la documentación de la citada librería viene esto:

Código PHP:

  jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
}); 
   

Supuse que hay que corregir esto:

jQuery(document).ready(function(){
$('#accordion .h3').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});

Ya que accordion está definido como Id y no como class, y usa h3 como zona sensible, cosas así, pero no jala. (Eliminé también todas las llamadas a los jquery.ui.ejemplo.js, en teoría no hay que llamarlas)

2) El código que da Hector

Por alguna razón tampoco jala (sí, ya sé... el factor común soy yo).
(Sí cambié el nombre del ID de acordeon a accordion y el h1 a h3, tampoco soy tan burro)

3) La lista a Santa Claus

Lo que creo interesante es que con cambiar alguna opción en algún lado, pueda cambiarse el comportamiento a varias opciones abiertas al mismo tiempo, pero sin tocar digamos la parte html y que se utilice el mismo css. Esto lo veo más complicado en cierta medida, ya que al parecer utiliza un css que se modifíca dinámicamente...


Ahora sí... el típico grito de ayuda desesperada... ¡Ayuda por favoooor!

[masterpuppet]

Que tal Rafael, esta mal el selector, h3 no es una clase, deberia ser:

Código Javascript:

jQuery(document).ready(function(){
   $('#accordion h3').click(function() {
      $(this).next().toggle('slow');
      return false;
   }).next().hide();
});
 

Con respecto a la lista de santa, ten en cuenta que no estas utilizando el accordion per se, no hay nada para configurar, aunque te podrias crear tu clase accordion y darle el comportamiento que quieras.

Saludos.

[Rafael]

Gracias Masterpuppet, lo voy a probar, y me reporto