web-dev-qa-db-fra.com

JQUERY UI Accordion start réduit

Comment puis-je faire en sorte que le démarrage de l'accordéon jquery UI soit réduit lors du chargement du formulaire. Y at-il un code javascript pour cela?

jqueryaccordionjquery-ui-accordion
81
H Bellamy

Dans vos options, spécifiez:

{
  ...
  active: false,
  collapsible: true,
  ...
}

Voir la documentation de active .

192
topek

J'essayais de faire la même chose. Utilisation des onglets Jquery UI. Je voulais qu'aucun montrer avec 5 onglets lorsque vous commencez.

using active: false a montré le contenu du 5ème onglet. J'ai donc mis les onglets CSS à afficher: aucun; puisque les changements en ligne sont affichés. J'espère que cela aide quelqu'un!

<script>
$(function() {
    $( "#tabs" ).tabs({
        active: false,
        collapsible: true,
    });
});

Et dans le style

#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5{ 
    display:none;
}
8
nonono nonono

J'ai utilisé ce code, comme j'utilisais un widget Dreamweaver, le code que Topek n'a pas fonctionné pour moi, j'espère que cela m'aidera,

jQuery("#jQueryUIAccordion").accordion({ 
        event: "click",
        active: false,
        collapsible: true,
        autoHeight: false

    });
4
Lyndon John Haslam

Pour compléter le answer of topex , avec Jquery UI 1.10.3, je devais définir l'option 'repliable' avant l'option 'active'.

$( ".accordion" ).accordion("option", { 
    collapsible: true,
    active: false
});

Voir le documentation

3
shagshag

Si vous utilisez les propriétés "wysiwyg" et que le codage vous dérange, essayez de mettre un nombre dans la case "Actif" un de plus que votre liste de sections. J'ai 12 sections et mettre "13" dedans et cela a fonctionné pour moi.

1
Steve

Si vous regardez le début du groupe de panneaux dans votre code, recherchez ceci

<div id="collapseOne1" class="panel-collapse collapse in">

si vous supprimez simplement le "in", le panneau se ferme lors du chargement de la page.

0
user6236374

Si vous utilisez Jquery Accordion par défaut, il affiche toujours le premier contenu du panneau. Vous pouvez le désactiver en utilisant active: false attribut.

jQuery(document).ready(function() {
    jQuery( "#accordion" ).accordion({
      collapsible: true,
      active: false,
    });
});

mais son comportement par défaut est que tous les panneaux seront réglés à la hauteur du plus grand des panneaux. alors pour cela il faut ajouter "heightStyle" attribut.

heightStyle: "content",

alors, chaque panneau sera aussi grand que son contenu.

0
Ashish v