jQuery UI accordion qui garde plusieurs sections ouvertes ?

Question

Je suis peut-être idiot, mais comment garder ouvertes plusieurs sections dans l'accordéon de jQuery UI ? Les démos n'en ont qu'une seule ouverte à la fois... Je cherche un système de type menu escamotable.

Answer 1

C'est très 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>

Answer 2

Le présent a été discuté à l'origine en el Documentation de jQuery UI pour Accordion :

NOTE : Si vous souhaitez que plusieurs sections plusieurs sections à la fois, n'utilisez pas d'accordéon.

Un accordéon ne permet pas de mo d'un panneau de contenu en même temps en même temps, et cela demande beaucoup d'efforts. efforts pour y parvenir. [ ] un widget qui permette d'ouvrir plus d'un panneau de contenu, n'utilisez pas le widget ce widget. En général, il peut être écrit avec quelques quelques lignes de jQuery, quelque chose comme comme ceci :

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

Ou animés :

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

"Je suis peut-être un idiot" - Vous n'êtes pas un idiot si vous ne lisez pas la documentation, mais si vous avez des problèmes, cela accélère généralement la recherche d'une solution.

Answer 3

J'ai posté ce message dans un fil similaire, mais j'ai pensé qu'il pourrait être pertinent ici aussi.

Réaliser cela avec une seule instance de jQuery-UI Accordion

Comme d'autres l'ont fait remarquer, la Accordion n'a pas d'option API permettant de le faire directement. Cependant, si pour une raison quelconque vous doit utiliser le widget (par exemple, si vous maintenez un système existant), il est possible de le faire en utilisant l'option beforeActivate pour subvertir et émuler le comportement par défaut du widget.

Par exemple :

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

Voir un Démonstration de jsFiddle

Answer 4

Ou encore plus 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>

Answer 5

J'ai créé un plugin jQuery qui a le même aspect que l'accordéon jQuery UI et qui peut conserver tous les onglets. \sections ouvert

Vous pouvez le trouver ici

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

fonctionne avec le même balisage

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

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

UPDATE : le plugin a été mis à jour pour supporter l'option d'onglets actifs par défaut

UPDATE : Ce plugin est désormais obsolète.