hasclass - jquery html

Buscando un complemento de JQuery similar a Accordian, pero que permite abrir varias secciones a la vez (10)

Cambiado algunas cosas presumiblemente para 1.8.5.

Moviendo la palanca se solucionó un problema de cambio de estado (haga clic en mostrar, haga clic en no ocultar, haga clic en ocultar, haga clic en mostrar, haga clic en ocultar ...) Clasifica la plantilla y la representación de jquery un tanto incompatibles

$(".colapse").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons") .find("h3") .addClass("ui-accordion-header ui-helper-reset ui-corner-all ui-state-default") .prepend(''<span class="ui-icon ui-icon-triangle-1-e"/>'') .click(function() { $j(this).toggleClass("ui-accordion-header-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top").toggleClass("ui-state-active") .toggleClass("ui-state-default") .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s") .end().next().toggle().toggleClass("ui-accordion-content-active"); return false; }) .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

Busco tener un elemento de UI similar al que ofrece el complemento JQUERY Accordian, pero permite al usuario mantener abiertas varias secciones a la vez.

La documentación tiene lo siguiente que decir, y sugiere un enfoque alternativo con un fragmento de código (ver más abajo). Eso es genial y todo, y el código que proporcionan básicamente funciona, pero me encuentro recreando muchas cosas integradas en el complemento como cambiar las clases y aplicar los temas manualmente en el XHTML.

Mis preguntas:

Antes de ir demasiado lejos en la ruta manual, ¿alguien sabe de un plug-in o mod similar a este para permitir que se abran varios paneles a la vez?
¿Hay otro nombre común para un control similar al acordeón que permita varios paneles abiertos que podría usar para Google para otras opciones?

Aquí está la parte a la que hice referencia anteriormente en la documentación, si es importante.

NOTA: Si desea abrir 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 se necesita mucho esfuerzo para hacerlo. 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(); }); Or animated: jQuery(document).ready(function(){ $(''.accordion .head'').click(function() { $(this).next().toggle(''slow''); return false; }).next().hide(); });

Este fragmento de código soluciona el problema de la esquina (la esquina inferior del encabezado debería desaparecer al expandirse y viceversa)

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons") .find("h3") .addClass("ui-accordion-header ui-helper-reset ui-corner-bottom ui-corner-top ui-state-default") .hover(function() { $(this).toggleClass("ui-state-hover"); }) .prepend(''<span class="ui-icon ui-icon-triangle-1-e"/>'') .click(function() { $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active") .toggleClass("ui-state-default").toggleClass("ui-corner-bottom") .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s") .end().next().slideToggle().toggleClass("ui-accordion-content-active"); return false; }) .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

Gracias por las sugerencias de todos, pero finalmente encontré algo por mi cuenta que hace exactamente lo que estaba buscando. Lo estoy agregando como respuesta para cualquier otra persona que necesite algo similar.

La solución
Utilizando el código y el XHTML de muestra here , puede extender el complemento JQuery Accordion para tener varios paneles abiertos a la vez y mantener la temática y otras funciones proporcionadas por el complemento sin recrear los estilos.

Vea el sitio vinculado anteriormente para ver un ejemplo completo, pero aquí está la esencia del código necesario para que el control de acordeón permita que se abran varios paneles. Use el mismo HTML para definir los encabezados y el contenido como se describe en la documentación del complemento

He hecho un complemento de jQuery que tiene el mismo aspecto de jQuery UI Accordion y puedo mantener abiertas todas las pestañas y secciones

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 predeterminada de pestañas activas

La mejor solución es usar 1 acordeón por sección, como también dijo Matthew Brown.

$( "#accordion1" ).accordion({ collapsible: true }); $( "#accordion2" ).accordion({ collapsible: true }); $( "#accordion3" ).accordion({ collapsible: true });

Modifiqué un código que había encontrado en línea la semana pasada buscando una solución similar. Esto supone que cada acordeón es una lista desordenada anidada. Para que esto funcione, debe tener identificaciones únicas para cada uno de sus acordeones. Aquí hay un ejemplo:

HTML

<ul id="uniqueAccordion1" class="menu"> <li class="noaccordion"> <a href="#">Top Level 1</a> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> </ul> </li> <li> <a href="#">Top Level 2</a> <ul> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> </ul> </li> </ul>

$(function() { // initialize admin menu loadNav(); }); function loadNav() { // initially show opened $.each($(''ul.menu''), function(){ $(''#'' + this.id + '' .expandfirst ul:first'').show(); }); // watch for click $(''ul.menu li > a'').click(function() { var $this = $(this); var $parent = $this.parent(); if ($parent.hasClass(''noaccordion'')) { return false; } var $checkElement = $this.next(); if ($checkElement.is(''ul'')) { $checkElement.slideToggle(''fast''); } return false; }); }

Necesitará su propio CSS para admitir esto, pero permite cualquier cantidad de acordeones y también le permite desactivar una sección particular para que no se cierre (si, por ejemplo, usa esto para la navegación) agregando la clase noaccordion a un nivel principal Etiqueta LI. Por último, puede agregar una clase expandir primero a un nivel principal LI para abrir automáticamente el acordeón para los elementos correspondientes en la carga de la página.

Otra posibilidad sería utilizar múltiples instancias de acordeón (1 acordeón por sección). Intenté usar la solución de JohnFx anterior pero eso creó problemas de estilo que no tuve con el acordeón predeterminado. Cuando dividí mi acordeón individual de 2 secciones en dos acordeones, pude mantener el estilo perfecto. Además, no tiene que lidiar con la implementación interna de css y html del acordeón.

Otra solución es el complemento de maccordion - https://github.com/Dattaya/Maccordion

Ejemplo: http://jsfiddle.net/Dattaya/pTXju/

Es compatible con las opciones: deshabilitado, activo, heightStyle, evento, encabezado, iconos ; Opciones relacionadas con el efecto: efecto, opciones, suavizado, velocidad.

Métodos: destruir, deshabilitar, habilitar, opción, widget, actualizar .

Eventos: crear, antes Activar, activar .

Y también tienes la posibilidad de agregar / eliminar pestañas dinámicamente. Documentación - https://github.com/Dattaya/Maccordion/blob/master/README.md

Edite el código anasnakawa para aquellos que no necesitan el estilo jQuery UI Accordion y desean mantener el código simple. (Espero que lo encuentres útil)

HTML:

<div id="multiOpenAccordion"> <h3>tab 1</h3> <div>A lot of text</div> <h3>tab 2</h3> <div>A lot of thex 2</div> </div>

Javascript:

$(function(){ $(''#multiOpenAccordion'').multiAccordion(); });

Código modificado:

Edición: Si usa la barra de desplazamiento personalizada Malihu, entonces puede haber problemas con IE. IE cae error diciendo

Argumento no válido, línea xx, carácter xxx

Eliminé este código de la barra de desplazamiento de Malihu (que es responsable del contenido de desplazamiento que tiene un error de más de 1000px): ayudó.

$.fx.prototype.cur = function(){ if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) { return this.elem[ this.prop ]; } var r = parseFloat( jQuery.css( this.elem, this.prop ) ); return typeof r == ''undefined'' ? 0 : r; }

Esto me dio un verdadero dolor de cabeza.

<ul class="accordion"> <li id="one" class="files"> <a href="#one">Admin Video</a> <ul class="sub-menu"> <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/addvideo"><em>01</em>Add video</a></li> <li><a href="<?php echo base_url();?>index.php/admin/adminvideo"><em>02</em>List Video</a></li> <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/categorys"><em>03</em>Video Categories</a></li> </ul> </li> <li id="two" class="mail"> <a href="#two">Users</a> <ul class="sub-menu"> <li><a href="<?php echo base_url();?>index.php/admin/admin/listsubs"><em>01</em>Subscribers List</a></li> <li><a href="<?php echo base_url();?>"><em>02</em>User Video Suggestion</a></li> </ul> </li> <li id="three" class="cloud"> <a class="active" href="#three">Background Image options</a> <ul class="sub-menu"> <li><a href="<?php echo base_url();?>index.php/admin/adminsettings"><em>01</em>Add</a></li> <li><a href="<?php echo base_url();?>index.php/admin/adminsettings/listbgs"><em>02</em>List</a></li> </ul> </li> </ul> $(document).ready(function() { var accordion_head = $(''.accordion > li > a''), accordion_body = $(''.accordion li > .sub-menu''); $.each($(".accordion > li > a"), function(){ if($(this).attr(''class'') == ''active'') { $(this).next().slideDown(''normal''); } }); // Open the first tab on load //accordion_head.first().addClass(''active'').next().slideDown(''normal''); // Click function accordion_head.on(''click'', function(event) { // Disable header links event.preventDefault(); // Show and hide the tabs on click if ($(this).attr(''class'') != ''active''){ accordion_body.slideUp(''normal''); $(this).next().stop(true,true).slideToggle(''normal''); accordion_head.removeClass(''active''); $(this).addClass(''active''); } }); });

espera que te ayude