Bootstrap Plugin Collapse im Frontend zur „Akkordeon-Darstellung“

Thema wurde von Anonymous, 27. Oktober 2016 erstellt.

  1. Anonymous

    Anonymous Mitglied

    Registriert seit:
    17. Dezember 2018
    Beiträge:
    5
    Danke erhalten:
    0
    Danke vergeben:
    1
    Moin,
    da ich in der letzten Zeit wenig Zeit hatte mich mit dem Akkordeon zu beschäftigen (andere Dinge waren etwas wichtiger) möchte ich mich nun etwas Intensiv damit beschäftigen...
    Mein Ziel ist es eine FAQ mit dem Akkordeon zu erstellen, nachdem ich meinen Shop auf Theme umgestellt habe nun die Frage aller Fragen ....Funktionieren die Datein von GnuZilla auch für die Themes ?
     
  2. thomas_myhobs

    thomas_myhobs Neues Mitglied

    Registriert seit:
    17. März 2020
    Beiträge:
    1
    Danke erhalten:
    1
    Danke vergeben:
    2
    Hallo und vielen Dank besonders an Til für die gute Zusammenfassung! :)

    Ich habe gerade im Malibu-Theme eine FAQ damit umgesetzt. Wegen des Hostings in der Gambio-Cloud komme ich nicht an den von Til genannten Template-Ordner. Das war aber auch nicht erforderlich. Der Aufbau ging sehr einfach in zwei Schritten:
    1. Darstellung/ Template Einstellungen/ Style Edit/ Theme bearbeiten/ (drei Punkte)/ SCSS/CSS bearbeiten .... und dort den CSS Code von Til anfügen
    2. Darstellung/ Content Manager/ Seiten/ Infoseiten/ +Neue Inhaltsseite ... erstellen und in der html-Ansicht den html-Code einkopieren und anpassen
    Die FAQ ist damit im Footer erreichbar.
    Funktioniert auf Anhieb ;): https://www.my-homebrands.com/de/info/faq-fragen-antworten.html
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    26. November 2015
    Beiträge:
    2.466
    Danke erhalten:
    396
    Danke vergeben:
    1.173
    Hallo,

    ich wollte auch nur mal schnell ein dickes Dankeschön loswerden. Hab heute meine FAQ ins Leben gerufen und ging auch auf Anhieb: (Link nur für registrierte Nutzer sichtbar.)
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    13. Mai 2019
    Beiträge:
    263
    Danke erhalten:
    49
    Danke vergeben:
    83
    Hatten den Thread nicht abonniert und schaue gerade zufällig hier rein. So viele schöne FAQs! :) Da hat sich die gemeinsame Arbeit doch gelohnt.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    21. März 2014
    Beiträge:
    153
    Danke erhalten:
    13
    Danke vergeben:
    48
    Funktioniert das auch bei einem Theme?
    Ich quäle mich da wirklich gerade mit rum und will es im Klonshop probieren.

    Kann man die bootstrap-collapse.min.js einfach so verschieben ohne Probleme?
    Und wo finde ich die eigentlich?

    Danke schonmal!!
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.751
    Danke erhalten:
    541
    Danke vergeben:
    408
    (Link nur für registrierte Nutzer sichtbar.)
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    21. März 2014
    Beiträge:
    153
    Danke erhalten:
    13
    Danke vergeben:
    48
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.751
    Danke erhalten:
    541
    Danke vergeben:
    408
    Was klappt nicht ein? Das Akkordeon, wenn du ein anderes öffnet?

    Wenn ja, frage mal @Motte . In ihrem Shop (Theme) funzt das. (Link nur für registrierte Nutzer sichtbar.)
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.595
    Danke erhalten:
    10.426
    Danke vergeben:
    1.498
    Da musst du nur noch mal auf den Button klicken, dann klappt das ein.
    Möglicherweise ist das da so gewollt, dass es nciht automatisch einklappt.
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    26. November 2015
    Beiträge:
    2.466
    Danke erhalten:
    396
    Danke vergeben:
    1.173
    Ist geklärt :) im Code war eine Zeile zuviel, die hat das verhindert. Jetzt läuft es sauber ;)
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    21. März 2014
    Beiträge:
    153
    Danke erhalten:
    13
    Danke vergeben:
    48
    Motte, du bist die Beste! :-D
    Es ist super einfach und läuft toll und ist schon gefüllt im Einsatz.
    DANKE!!

    Jetzt brauche ich nur noch ein A-Z Lexikon, dann kann es weiter gehen.
    Hat da jemand eine Idee?
    So wie das hier: https://www.stoff4you.de/stoff-lexikon/
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.595
    Danke erhalten:
    10.426
    Danke vergeben:
    1.498
    Das sieht für mich nach einer Content-Seite mit Anker-Button (A, B, C...) und optischen Blöcken mit einfachen Linktexten aus.
     
  13. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    20. November 2019
    Beiträge:
    39
    Danke erhalten:
    0
    Danke vergeben:
    9
    Danke an Motte und alle anderen, habe es nun auch zum Laufen bekommen.

    Einzig auf mobilen Endgeräten ist es etwas unübersichtlich. Gibt es hier noch eine Möglichkeit, dass beim öffnen eines Accordion Tabs automatisch nach oben gescrollt wird, damit der User mit dem Lesen starten kann ohne selbst noch hochscrollen zu müssen?
     
  14. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    305
    Danke erhalten:
    47
    Danke vergeben:
    17
    #74 Anonymous, 7. September 2021
    Zuletzt bearbeitet: 7. September 2021
    Ich habe ein Problemchen mit dem Accordion, vielleicht kann mir jemand einen Tipp geben,

    Ich habe das Beispiel von Til genommen und eingebaut.
    Aber das Problem ist, dass der Text der zusammengeklappten Elemente immer sichtbar bleibt.

    .faq.collapse {
    display: none;
    }

    scheint nicht zu greifen.

    Hat jemand eine Idee was das sein könnte?

    Habe 4.4.03 mit Honeygrid theme


    Code:
    <div class="panel-group" id="accordion" role="tablist">
        <div class="panel panel-default">
            <div class="faq-panel-heading" id="headingOneOne" role="tab">
                <h4 class="panel-title"><button class="btn btn-block" data-parent="#accordion" data-toggle="collapse" href="#collapseOneOne" style="text-align:left; white-space:normal;" type="button"><i class="fa fa-question-circle" style="color:red;"></i> Das ist eine Frage im ersten Abschnitt?</button></h4>
            </div>
    
            <div aria-expanded="true" class="faq panel-collapse collapse in" id="collapseOneOne" role="tabpanel" style="">
                <div class="panel-body">
                    <p>
                        Das ist eine Antwort!
                    </p>
                </div>
            </div>
        </div>
    
        <div class="panel panel-default">
            <div class="faq-panel-heading" id="headingOneTwo" role="tab">
                <h4 class="panel-title"><button class="btn btn-block" data-parent="#accordion" data-toggle="collapse" href="#collapseOneTwo" style="text-align:left; white-space:normal;" type="button"><i class="fa fa-question-circle" style="color:red;"></i> Noch eine Frage im ersten Abschnitt?</button></h4>
            </div>
    
            <div aria-expanded="false" class="faq panel-collapse collapse" id="collapseOneTwo" role="tabpanel" style="height: 0px;">
                <div class="panel-body">
                    <p>
                        Das ist die zweite Antwort dazu!
                    </p>
                </div>
            </div>
        </div>
    
        <div class="panel panel-default">
            <div class="faq-panel-heading" id="headingOneThree" role="tab">
                <h4 class="panel-title"><button class="btn btn-block" data-parent="#accordion" data-toggle="collapse" href="#collapseOneThree" style="text-align:left; white-space:normal;" type="button"><i class="fa fa-question-circle" style="color:red;"></i> Noch eine Frage im ersten Abschnitt?</button></h4>
            </div>
    
            <div aria-expanded="false" class="faq panel-collapse collapse" id="collapseOneThree" role="tabpanel" style="height: 0px;">
                <div class="panel-body">
                    <p>
                        Das ist die zweite Antwort dazu!
                    </p>
                </div>
            </div>
        </div>
    </div>
    
     

    Anhänge:

    • g900.jpg
      g900.jpg
      Dateigröße:
      20,6 KB
      Aufrufe:
      6
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    305
    Danke erhalten:
    47
    Danke vergeben:
    17
    Das ist wirklich übel, es scheint an meinem Gambio zu liegen, ich finde aber nicht heraus was es auslöst.
    Ich habe einen Testshop aufgesetzt mit exakt den selben Änderungen, selben Modulen usw.
    Da tritt das Problem nicht auf :-(

    Ich bin mit meinem Latein da am Ende, und würde mich freuen wenn jemand einen Tipp hätte warum bei mir die Inhalte nicht verschwinden wenn ich den Bereich einklappe.

    Was noch auffällt: Wenn man eine Sektion einklappt verschwindet der Inhalt kurz, nach 1/2 Sekunde ist er wieder da.
    Ach, und alle Sektionen sind bei erster Ansicht der Seite ausgeklappt. Auf der Testsite reagiert alles völlig normal.
     
  16. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.595
    Danke erhalten:
    10.426
    Danke vergeben:
    1.498
    Das könnte an einer Einstellung für den Header liegen (für die Suche?)
    Beim Umzug des Filters gab es so ein Problem auch.
    Schau mal ins CSS, ob da auch alles gleich ist, in deinen Shops
     
  17. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    305
    Danke erhalten:
    47
    Danke vergeben:
    17
    Ja, CSS ist identisch, wenn ich in Chrome das untersuche ist alles identisch. Auch der Code vor, während und nach dem Einklappen ist gleich. Die Box mit dem Inhalt wird nach dem Einklappen auf height: 0px gestellt, der Text darin bleibt aber sichtbar.

    Vor dem Einklappen:
    Code:
    <div class="faq panel-collapse collapse in" id="collapseOne1" role="tabpanel" aria-expanded="true" style="">
    <div class="panel-body">
       <p>
        TEXT TEXT TEXT
       </p>
    </div>
    </div>
    
    Nach dem Einklappen:

    Code:
    <div class="faq panel-collapse collapse" id="collapseOne1" role="tabpanel" aria-expanded="false" style="height: 0px;"> <div class="panel-body">
       <p>
        TEXT TEXT TEXT
       </p>
    </div>
    </div>
    

    Gesamter Code:

    Code:
    <div class="panel panel-default"> 
     <div class="faq-panel-heading" id="headingOne1" role="tab"> 
     <h4 class="panel-title">
     <button class="btn btn-block collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseOne1" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">
     <i class="fas fa-comment" style="color:green;"></i> ÜBERSCHRIFT</button></h4> 
    </div> 
    
    <div class="faq panel-collapse collapse" id="collapseOne1" role="tabpanel" aria-expanded="false" style="height: 0px;"> 
    <div class="panel-body"> 
       <p>
     TEXT TEXT TEXT 
        </p> 
    </div> 
    </div> 
    </div>
    



    Beim Header muss ich mal sehen, den habe ich erweitert, vielleicht liegt es daran.
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    305
    Danke erhalten:
    47
    Danke vergeben:
    17
    Ich habe nun mal testweise das Original-Theme Honeygrid ganz frisch aktiviert, ohne eigenes CSS, das selbe Problem.
    Auch testweise Aktivierung von Malibu zeigt den selben Fehler. Sehr eigenartige Sache ist das.
    Auf der Testsite kann ich machen was ich will, ich bekomme den Fehler da nicht reproduziert.
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    305
    Danke erhalten:
    47
    Danke vergeben:
    17
    Nützt alles nix, ich kriege das nicht zum Laufen. Ich habe mir daher eine eigene Lösung gebaut, funktioniert tadellos :)