Puede que sea un idiota, pero ¿cómo se mantienen abiertas varias secciones en el acordeón de jQuery UI? Todas las demostraciones tienen solo una abierta a la vez ... Estoy buscando un sistema de tipo de menú plegable.
Puede que sea un idiota, pero ¿cómo se mantienen abiertas varias secciones en el acordeón de jQuery UI? Todas las demostraciones tienen solo una abierta a la vez ... Estoy buscando un sistema de tipo de menú plegable.
Respuestas:
Esto se discutió originalmente en la documentación de jQuery UI para Accordion :
NOTA: Si desea que se abran varias secciones a la vez, no use un acordeón
Un acordeón no permite que se abra más de un panel de contenido al mismo tiempo, y eso requiere mucho esfuerzo. Si está buscando un widget que permita abrir más de un panel de contenido, no lo use. Por lo general, se puede escribir con unas pocas líneas de jQuery, algo como esto:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });O animado:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });
"Puede que sea un idiota": no eres un idiota si no lees la documentación, pero si tienes problemas, generalmente se acelera la búsqueda de una solución.
Bastante simple:
<script type="text/javascript">
(function($) {
$(function() {
$("#accordion > div").accordion({ header: "h3", collapsible: true });
})
})(jQuery);
</script>
<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>create: function(event) { $(event.target).accordion( "activate", false ); }para empezar a colapsar.
create: function(event) { $(event.target).accordion( "activate", false ); }establecer la opción:{active: false}
Publiqué esto en un hilo similar, pero pensé que podría ser relevante aquí también.
Lograr esto con una sola instancia de jQuery-UI Accordion
Como han señalado otros, el Accordionwidget no tiene una opción API para hacer esto directamente. Sin embargo, si por alguna razón debe usar el widget (por ejemplo, está manteniendo un sistema existente), es posible lograrlo usando la beforeActivateopción del controlador de eventos para subvertir y emular el comportamiento predeterminado del widget.
Por ejemplo:
$('#accordion').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancels the default action
}
});ui-accordion-header-active
¿O incluso más simple?
<div class="accordion">
<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 class="accordion">
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div class="accordion">
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
$(".accordion").accordion({ collapsible: true, active: false });
</script>He hecho un complemento de jQuery que tiene el mismo aspecto de jQuery UI Accordion y puede mantener todas las pestañas \ secciones abiertas
Lo puedes encontrar aquí
http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
funciona con el mismo marcado
<div id="multiOpenAccordion">
<h3><a href="#">tab 1</a></h3>
<div>Lorem ipsum dolor sit amet</div>
<h3><a href="#">tab 2</a></h3>
<div>Lorem ipsum dolor sit amet</div>
</div>Código javascript
$(function(){
$('#multiOpenAccordion').multiAccordion();
// you can use a number or an array with active option to specify which tabs to be opened by default:
$('#multiOpenAccordion').multiAccordion({ active: 1 });
// OR
$('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });
$('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});ACTUALIZACIÓN: el complemento se ha actualizado para admitir la opción de pestañas activas predeterminadas
ACTUALIZACIÓN: este complemento ahora está en desuso.
En realidad, estuve buscando en Internet una solución a esto durante un tiempo. Y la respuesta aceptada da la buena respuesta "según el libro". Pero no quería aceptar eso, así que seguí buscando y encontré esto:
http://jsbin.com/eqape/1601/edit - Ejemplo en vivo
Este ejemplo extrae los estilos adecuados y agrega la funcionalidad solicitada al mismo tiempo, con espacio para escribir agregue su propia funcionalidad en cada clic del encabezado. También permite que haya varios divs entre los "h3".
$("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
.find("h3")
.addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
.hover(function() { $(this).toggleClass("ui-state-hover"); })
.prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
.click(function() {
$(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
.next().toggleClass("ui-accordion-content-active").slideToggle();
return false;
})
.next()
.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
.hide();Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion styles</title>
<!-- jQuery UI | http://jquery.com/ http://jqueryui.com/ http://jqueryui.com/docs/Theming -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>Toggle Panels</h1>
<div id="notaccordion">
<h3><a href="#">Section 1</a></h3>
<div class="content">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>
<h3><a href="#">Section 2</a></h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</div>
<h3><a href="#">Section 3</a></h3>
<div class="top">
Top top top top
</div>
<div class="content">
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<div class="bottom">
Bottom bottom bottom bottom
</div>
<h3><a href="#">Section 4</a></h3>
<div>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</div>
</div>
</body>
</html>`Encontré una solución complicada. Llamemos a la misma función dos veces pero con ID diferente.
Código JQuery
$(function() {
$( "#accordion1" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
$( "#accordion2" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});código HTML
<div id="accordion1">
<h3>Section 1</h3>
<div>Section one Text</div>
</div>
<div id="accordion2">
<h3>Section 2</h3>
<div>Section two Text</div>
</div>classsugerido por otros, esto significa que no se repite ( DRY )
Simple, cree múltiples div accordian cada uno representando una etiqueta de ancla como:
<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>Agrega algo de marcado. Pero funciona como un profesional ...
Simple: active el acordeón a una clase y luego cree divs con esto, como múltiples instancias de acordeón.
Me gusta esto:
JS
$(function() {
$( ".accordion" ).accordion({
collapsible: true,
clearStyle: true,
active: false,
})
});HTML
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>Simplemente llame a cada sección del acordeón como su propio acordeón. activo: n será 0 para el primero (por lo que se mostrará) y 1, 2, 3, 4, etc. para el resto. Como cada uno es su propio acordeón, todos tendrán solo una sección, y el resto se colapsará para comenzar.
$('.accordian').each(function(n, el) {
$(el).accordion({
heightStyle: 'content',
collapsible: true,
active: n
});
});Sin el acordeón jQuery-UI, uno puede simplemente hacer esto:
<div class="section">
<div class="section-title">
Section 1
</div>
<div class="section-content">
Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
<div class="section">
<div class="section-title">
Section 2
</div>
<div class="section-content">
Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>Y js
$( ".section-title" ).click(function() {
$(this).parent().find( ".section-content" ).slideToggle();
});abrir jquery-ui - *. js
encontrar $.widget( "ui.accordion", {
encontrar _eventHandler: function( event ) {dentro
cambio
var options = this.options, active = this.active, clicked = $( event.currentTarget ), clickedIsActive = clicked[ 0 ] === active[ 0 ], collapsing = clickedIsActive && options.collapsible, toShow = collapsing ? $() : clicked.next(), toHide = active.next(), eventData = {
oldHeader: active,
oldPanel: toHide,
newHeader: collapsing ? $() : clicked,
newPanel: toShow };a
var options = this.options,
clicked = $( event.currentTarget),
clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
collapsing = clickedIsActive && options.collapsible;
if (clickedIsActive == true) {
var toShow = $();
var toHide = clicked.next();
} else {
var toShow = clicked.next();
var toHide = $();
}
eventData = {
oldHeader: $(),
oldPanel: toHide,
newHeader: clicked,
newPanel: toShow
};antes de active.removeClass( "ui-accordion-header-active ui-state-active" );
agregar if (typeof(active) !== 'undefined') {y cerrar}
disfrutar
Solo usa jquery each () función;
$(function() {
$( ".selector_class_name" ).each(function(){
$( this ).accordion({
collapsible: true,
active:false,
heightStyle: "content"
});
});
});