So steuern Sie die Sichtbarkeit von Bootstrap-Akkordeonformularen

8

Ich benutze das Bootstrap-Akkordeon als einzigartige Möglichkeit, ein Formular zu erstellen. Grundsätzlich hat die Form 7 Teile jeweils in einem eigenen Akkordeon-Panel. Im Moment habe ich es so, wie ich will, wo sie alle zusammengebrochen sind und wenn du das erste Akkordeon öffnest, gibt es einen Knopf, der mit dem zweiten Akkordeon verbunden ist. Genau so will ich, dass es funktioniert. Gibt es jedoch eine Möglichkeit, die anderen Akkordeon-Panels zu verstecken, bis der "Next" -Button ausgewählt wurde?

Wenn ich zum Beispiel die Seite lade, möchte ich nur, dass sie "1. Features auswählen" sehen kann und wenn sie diese öffnen und ihre Elemente auswählen, wenn sie auf die nächste Schaltfläche drücken, wird das zweite Panel sichtbar und öffnet sich . und so weiter.

Ich gehe davon aus, dass ich etwas tun kann, wo ich sie versteckt habe, und der Knopf löst aus, dass es sichtbar ist? Ich habe nach Beispielen für so etwas gesucht, aber ich kann nichts finden. Ich weiß, dass diese Seite kein Dienst zum Schreiben von Code ist. Wenn also jemand mich in die richtige Richtung weisen kann, kann ich den Rest erledigen.

%Vor%

Ich habe es in JSFiddle neu erstellt, damit Sie sehen können, worüber ich spreche und damit spielen.

Geige HIER

    
Vince Mamba 16.12.2015, 15:12
quelle

2 Antworten

7

Sie können die divs, die Sie wollen, zum ersten Mal in der Funktion ready mit der Methode hide() ausblenden, z. B .:

%Vor%

Danach sollten Sie jedem Button id einen Bezeichner next hinzufügen und dann ein click Event anhängen, um Ihr accordion wie gewünscht bei jedem Klick zu kontrollieren.

%Vor%

Hoffe, das hilft.

Snippet

%Vor% %Vor% %Vor%
    
Zakaria Acharki 16.12.2015, 15:20
quelle
2

Ich bin mir nicht sicher, ob Sie genau danach suchen, aber wie wäre es, wenn Sie einfach das Ankerelement aus den Überschriften von Schritt 2 und Schritt 3 entfernen, damit ein Benutzer sie nicht anklicken kann, um sie zu öffnen? Aktualisierte Geige hier: Ссылка

%Vor%

Sie fügen den Schritten 2 und 3 sogar eine "Vorherige" -Schaltfläche hinzu, damit sie den Vorgang fortsetzen können? Aktualisierte Geige hier für dieses hier: Ссылка

    
David Wilkinson 16.12.2015 15:19
quelle