Buscando un complemento JQuery similar a Accordian, pero que permite varias secciones abiertas a la vez

Question

Estoy buscando tener un elemento UI similar al que ofrece el complemento JQUERY Accordian, pero que permite al usuario conservar secciones múltiples abrir de una vez

La documentación tiene lo siguiente que decir, y sugiere un enfoque alternativo con un fragmento de código (ver a continuación). 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:

1. Antes de llegar demasiado lejos a lo largo de la ruta Manual , ¿alguien sabe de un similares plug-in, o mod que éste para permitir que varios paneles sean abra a la vez?

2. ¿Hay un otro nombre común para un control similar al acordeón que permite múltiples paneles abiertos que podría utilizar para Google para otras opciones ?

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

NOTA: Si desea que varias secciones abiertas al mismo tiempo, no utilice un acordeón

Un acordeón no permite más de un panel de contenido para ser abierta en el mismo tiempo, y toma mucho esfuerzo para hacer eso. Si está buscando para un widget que permite que se abra más de un panel de contenido , no use esto. Por lo general, se puede escribir con unas pocas líneas de jQuery lugar, algo así:

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(); 
}); 

Answer 1

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 persona que necesite algo similar.

La solución
Utilizando el código XHTML y la muestra here se puede ampliar el JQuery Accordion plug-in tener múltiples paneles abiertos a la vez y mantener la tematización y otra funcionalidad proporcionada por el plug-in sin recrear los estilos.

Consulte el sitio vinculado anteriormente para obtener un ejemplo completo, pero aquí está la carne del código necesario para que el control del acordeón permita que se abran varios paneles. Utilice el mismo HTML para definir las cabeceras y el contenido tal como se describe en la documentación de plug-in

<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons") 
     .find("h3") 
      .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom") 
      .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().toggleClass("ui-accordion-content-active").toggle(); 
       return false; 
      }) 
      .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide(); 
    }) 
    </script> 

Answer 2

he modificado un poco de código que había encontrado en línea la semana pasada en busca de una solución similar. Esto supone que cada acordeón es una lista desordenada anidada. Para que funcione, debe tener ID únicos para cada uno de sus acordeones. He aquí 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> 

JS

$(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 apoyar esto, pero permite que cualquier número de acordeones y también le permite a desactivar una sección en particular para que no se cierre (si, por ejemplo, usa esto para navegación) agregando la clase noaccordion a un mai n etiqueta de nivel LI Por último, puede agregar una clase expandfirst a un nivel principal LI para abrir automáticamente el acordeón para los elementos coincidentes en la carga de la página.

Answer 3

cambiado algunas cosas presumiblemente por 1.8.5.

Mover la palanca fija un problema de cambio de estado (Haga clic en Mostrar, haga clic sin ocultar, haga clic en Ocultar, haga clic en Mostrar, haga clic en Ocultar ...) clases tanto no coincidentes plantilla y prestación de jQuery sufrieron

$(".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(); 

Answer 4

tengo hecho un plugin de jQuery que tiene el mismo aspecto de la interfaz de usuario jQuery acordeón y puede mantener todas las pestañas \ secciones abiertas

se puede encontrar aquí

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

obras con el mismo código código

<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> 

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 plugin ha sido actualizado para soportar la opción predeterminada activa pestañas

Answer 5

Editado anasnakawa código de aquellos que no necesitan jQuery UI Accordion estilo y quiere mantener el código simple. (espero que lo encontrará ú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: Se

(function($){ 
    $.fn.extend({ 
     multiAccordion: function(options) { 
      var defaults = {}; 
      var options = $.extend(defaults, options); 
      return this.each(function() { 
       var $this = $(this); 
       var $h3 = $this.children('h3'); 
       var $div = $this.children('div'); 

       $h3.click(function(){ 
        var $this = $(this); 
        var $div = $this.next(); 

        if ($this.hasClass('closed')) { 
         $this.removeClass('closed').addClass('open'); 
         $div.slideDown('fast'); 
        } else { 
         $this.removeClass('open').addClass('closed'); 
         $div.slideUp('fast'); 
        } 
       }); 
      }); 
     } 
    }); 
})(jQuery); 

Editar: Si utiliza la barra de desplazamiento personalizada de Malihu, puede haber problemas con IE.IE cae por error diciendo

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

me quita el código de barra de desplazamiento Malihu (que es responsable sobre el desplazamiento del contenido que es más de 1000 píxeles fallo) - 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 verdadero dolor de cabeza

Answer 6

Este fragmento de código soluciona el problema de esquina (la esquina inferior cabecera debe desaparecer cuando se expande y vice visa)

$("#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(); 

Answer 7

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

Answer 8

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 }); 

Answer 9

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

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

Es compatible con opciones: discapacitados, activos, heightStyle, acontecimiento, cabecera, iconos de; opciones relacionadas con el efecto: efecto, opciones, suavizado, velocidad.

Métodos: destruir, deshabilitar, habilitar la opción, flash, refrescar.

Eventos: crear, antes de Activar, activar.

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

Answer 10

<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 le ayuda