N'ouvrir que de l'accordéon onglet à un moment

J'ai un accordéon qui fonctionne vraiment bien, il semble bon sur le site et fonctionne comme il se doit. Cependant, je vais essayer d'ajouter un peu de JavaScript de la fonctionnalité, de la rendre plus d'un aspect plus professionnel.

Actuellement, l'accordéon permet de disposer de plusieurs panneaux ouverts en même temps c'est à dire si j'ouvre un onglet, puis ouvrez un autre onglet, les deux onglets ouverts en même temps. Et la seule façon de fermer ces panneaux, est de re-cliquez sur l'en-tête.

Ce que je voudrais, c'est un peu de code JavaScript qui empêche plusieurs onglets d'être ouverts à la fois, donc si je clique sur un nouveau panneau, il faut fermer l'existant, ouvrez le panneau de première. Voici mon code HTML pour l'accordéon:

<div class="accordion"><b>Heading 1</b></div>
<div class="panel">
    <p class="text-light">Text 1</p>
</div>
<div class="accordion"><b>Heading 2</b></div>
<div class="panel">
    <p class="text-light">Text 2</p>
</div>

Voici mon code JavaScript dans un autre fichier JavaScript qui permet actuellement de plusieurs onglets ouverts à la fois

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

Vous ne savez pas si vous avez besoin de tous les CSS, mais voici le CSS pour afficher le panneau de

div.panel.show {
    display: block !important;
}

J'espère que quelqu'un pourra vous aider! Merci à l'avance!

double possible de comment faire pour que twitter bootstrap accordéon garder un groupe ouvert
Il suffit d'aller dans tous, les mettre à inactive et hide. Ensuite, vous activate et display sélectionné.
d'où vient l'OP dire qu'il est à l'aide de Bootstrap?

OriginalL'auteur Usman Zafar | 2016-06-10

6

Pour ce faire, vous devez réinitialiser l'état de l'accordéon à son état d'origine sur chaque clic de souris, avant de définir les classes nécessaires sur les cliqué éléments. Pour cela, vous pouvez extraire la fonctionnalité pour définir les noms de classe dans leur propre fonction et l'appeler comme requis. Essayez ceci:
```
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var setClasses = !this.classList.contains('active');
        setClass(acc, 'active', 'remove');
        setClass(panel, 'show', 'remove');

        if (setClasses) {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
        }
    }
}

function setClass(els, className, fnName) {
    for (var i = 0; i < els.length; i++) {
        els[i].classList[fnName](className);
    }
}
```
exemple

Ça marche!!!! Merci beaucoup! J'ai vraiment l'apprécier. Il y a une fonctionnalité que j'aimerais ajouter, cependant, je ne suis pas sûr si c'est possible... Quand vous cliquez sur l'accordéon de la rubrique je veux que la page pour faire défiler vers le bas pour l'ouvrir de l'accordéon, de sorte que l'utilisateur peut voir tout le contenu. Est-ce quelque chose qui peut être fait? Encore un énorme merci pour la réponse ci-dessus!
Ravi de vous aider. Vous pouvez le faire en ajoutant document.body.scrollTop = this.offsetTop; pour le gestionnaire de clic: jsfiddle.net/5h5evjpw/1
Hey! Merci pour la réponse rapide! J'ai essayé ce code, et il n'quelque chose d'étrange, lorsque je clique sur l'accordéon, il positionne l'open d'accordéon au bas de ma page, pour que je puisse voir la tête, mais le texte dans le panneau va de mon écran, toutes les idées sur la façon de résoudre ce problème?
Il est difficile de poser un diagnostic sans voir un exemple. Il est probablement préférable de commencer une nouvelle question pour cela - mais n'oubliez pas d'inclure tout votre code et un exemple de travail si vous pouvez
Hey! Votre solution a fonctionné! j'ai juste ajouté un "+750' à la fin du code, et il placé de la page à droite de la page, donc je vous remercie! Une dernière question, au moment de son saut, plutôt que de défilement en douceur, une idée de comment je peux ralentir le mouvement de l'écran, afin de lui donner une plus lisse plus sentir? Merci!

OriginalL'auteur Rory McCrossan

var acc = document.getElementsByClassName("accordion");
var i;
var last;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        if(last){
            last.classList.toggle("active",false);
            last.nextElementSibling.classList.toggle("show",false);
        }
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
        last=this;
    }
}

variable dernière permettra de suivre le dernier actif de l'accordéon, de sorte que vous n'avez pas besoin à chaque itération de l'accordéon et du panneau.

OriginalL'auteur Colin

Lors de la sélection d'un élément, il vous suffit de masquer tous d'entre eux à l'avance.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        hideAll();

        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

function hideAll() {
    for (i = 0; i < acc.length; i++) {
        acc[i].classList.toggle("active", false);
        acc[i].nextElementSibling.classList.toggle("show", false);
    }
}

OriginalL'auteur melancia

-1

que vous avez à couvrir le panneau avec de l'accordéon, de sorte que vous pouvez facilement le faire.

renvoyer cette

html
<div class="accordion"><b>Heading 1</b>
    <div class="panel">
        <p class="text-light">Text 1</p>
    </div>
    </div>
<div class="accordion"><b>Heading 2</b>
    <div class="panel">
        <p class="text-light">Text 2</p>
    </div>
    </div>

jquery:
$('.accordion').click(function() {
$(this).find('.panel').show();
$(this).siblings().find('.panel').hide();

});

exemple

L'OP n'est pas à l'aide de jQuery.

OriginalL'auteur Maharajan

Vous devez vous connecter pour publier un commentaire.