Bootstrap Plugin Collapse im Frontend zur „Akkordeon-Darstellung“

Hi Achim, auch Attribute, Eigenschaften und Customizer X-Sell Artikel werden unterstützt.
Der einzige Unterschied ist, dass sich diese natürlich nicht direkt in den Warenkorb legen lassen, sondern es öffnet sich die jeweilige Produkt Seite, damit eine notwendige Auswahl getroffen werden kann.
Auch machen wir das manchmal so, dass nur xsell Artikel ohne Attribute... angezeigt werden, damit alle, die angezeigt werden, auch direkt in den Warenkorb gelegt werden können (wenns solche gibt).

ED

 

Akkordion für Tabs Produkt-Info noch mal angepasst. Gambio v3.6.3.0 (geht auch mit 3.7.3.0, als USERMOD oder darüber anpassen mit {block} als overload)

 

Ich hab das hier mal aufgegriffen, um im aktuellen 3.14.3.0 einen Info-Seite mit dem Collapse-Effekt aufzubauen. Im Grund hat das auch geklappt.
Das Problem nun: eine Zeile die ins eigene CSS muss, kollidiert wohl irgendwie mit dem Suchfeld im Header....
Sobald ich ich:
.collapse {display: none;}
ins eigene CSS nehme, ist das Suchfeld futsch... wie das?

Hab grade das Ganze ein wenig untersucht:
Das Suchfeld wird im Inspector dargestellt mit div.navbar-search.collapse

Das ".collapse" kollidiert hier wohl irgendwie...

Was kann ich da tun?

 

So, ich hab mal ganz brachial (und dilettantisch) im eigenen CSS alle "collapse" in "collapse2" umbenannt... und im html-code dann auch statt der class "collapse" "collapse2" geschrieben. Nun kann ich die Dinge wieder ausklappen und die Suche ist auch wieder im header. Aber das Ausklappen ist ruckarting, die class "collapsing" wird wohl nicht genutzt, ichmüsste also auch das .js modifizieren, oder???
Oder kann ich das Suchfeld irgendwie aus dem "collapse" befreien?

 

Du musst dieses ".collapse" im css genauer anweisen,
wenn man .collapse{ ....} im css angibt, greift das für alle .collapse im Shop.
Gibt man z.B. .product-info .collapse greift das nur bei Product-Info.
Prinzip klar?

 

Danke, werd mich mal mehr eindenken/einarbeiten, für "nebenher" ist das manchmal echt kompliziert

 

Ha, hat tatsächlich funktioniert! Danke! Das eigene css habe ich nun so:

Code:

/* Benötigte Bootstrap CSS Formatierungen zur „Akkordeon-Darstellung“ */

.panel-group .collapse {
  display: none;
}

.panel-group .collapse.in {
  display: block;
}

.panel-group tr.collapse.in {
  display: table-row;
}
.panel-group tbody.collapse.in {
  display: table-row-group;
}

.panel-group .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  -o-transition-property: height, visibility;
     transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
     transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
     transition-timing-function: ease;
}

Klappt.

 

Moin,
ich muss mal das Thema aufgreiffen...
Ich habe jetzt mal die Dateien von postel hinterlegt nur steh ich grade völlig auf dem Schlauch wie ich das realisiere das es auch angezeigt in den Artikelinfos bzw. im extra angelegten TAB...
Ich brauche nur nen kleinen Anschupser ;-)

 

Das funktioniert nicht mehr (war bis Gambio 3.6.x.x), baue es lieber wieder aus.
Welche Shop-Version hast du und Template oder Theme?
Habe das Akkordion für Tabs Produkt-Info inzwischen angepasst an aktuelle Gambio-Versionen.

 

Hallo Gerd,
das es in der aktuellen Version nicht mehr läuft hab ich mir schon fast gedacht und erklärt wohl auch weshalb ich nicht wirklich damit weiterkomme :-(
Als Shop Version hab ich mittlerweile 4.0.0.1....

 

Hallo Sven,
habe in deinem SeitenOuellText gesehen das du das Template Honeygrid hast.
Nimm dieses und passe dir das Css an deinen Style an.

 

Danke Gerd,

...ich probiere das mal aus...

 

Ich wollte mich mal bedanken, dieser Thread hat mir enorm geholfen unsere FAQ-Seite mit Accordeons zu gestalten.

Wer es sich anschauen möchte: https://bogensportshop.eu/de/info/faq-haeufig-gestellte-fragen.html

Ich finde es immer wichtig, auch etwas zurückzugeben wenn man hier Hilfe aus der Community in Anspruch nimmt. Von daher: Wie auch andere hatte ich bei der Lösung von @GnuZilla Probleme, dass durch den zusätzlichen CSS-Code die Suche im Header verschwunden ist und ein paar andere Sachen nicht mehr so aussahen wie vorher. Daher habe ich .collapse und collapse.in zu faq.collapse und faq.collapse.in umbenannt. Dazu habe ich noch die Klasse panel-heading zu faq-panel-heading umbenannt und padding auf 0px gesetzt, weil ich fand, dass der zusätzliche Rahmen drumherum zu viel Platz einnimmt.

Das ist dann der CSS-Teil:

Code:

.faq.collapse {
  display: none;
}
.faq.collapse.in {
  display: block;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  -o-transition-property: height, visibility;
     transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
     transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
     transition-timing-function: ease;
}

.faq-panel-heading {
  padding: 0px;
}

Ich habe mehrere FAQ-Abschnitte, was aber ein großes Accordion ist, damit immer nur eine Frage aufgeklappt ist und egal wo ich was aufklappe, die gerade geöffnete Frage geschlossen wird. Dafür müssen alle buttons data-parent="#accordion" haben, das ist die id des ganzen Accordion. Der Link muss aber auf eine eindeutige id des divs verweisen, in dem die Antwort steht. Also z.B. href="#collapseTwoTwo", das ist die zweite Frage im zweiten Abschnitt. Das div hat dann id="collapseTwoTwo". Ich denke die Idee ist klar.

Eine funktionierenden, einfache Version des ganzen habe ich mal zusammengekürzt:

HTML:

<div class="panel-group" id="accordion" role="tablist">

  <div class="panel panel-default">
    <div class="faq-panel-heading" role="tab" id="headingOneOne">
      <h4 class="panel-title">
        <button style="text-align:left; white-space:normal;" class="btn btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneOne">
          <i style="color:red;" class="fa fa-question-circle"></i> Das ist eine Frage im ersten Abschnitt?
        </button>
      </h4>
    </div>
    <div id="collapseOneOne" class="faq panel-collapse collapse in" role="tabpanel">
      <div class="panel-body"><p>Das ist eine Antwort!</p>
      </div>
    </div>
  </div>

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

<br/>
<h3>Überschrift für den zweiten Abschnitt</h3>

  <div class="panel panel-default">
    <div class="faq-panel-heading" role="tab" id="headingTwoOne">
      <h4 class="panel-title">
        <button style="text-align:left; white-space:normal;" class="btn btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoOne">
          <i style="color:red;" class="fa fa-question-circle"></i> Ist das die erste Frage im zweiten Abschnitt?
        </button>
      </h4>
    </div>
    <div id="collapseTwoOne" class="faq panel-collapse collapse" role="tabpanel">
      <div class="panel-body"><p>So ist es, und das ist die erste Antwort im zweiten Abschnitt!</p>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="faq-panel-heading" role="tab" id="headingTwoTwo">
      <h4 class="panel-title">
        <button style="text-align:left; white-space:normal;" class="btn btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoTwo">
          <i style="color:red;" class="fa fa-question-circle"></i> Und hier kommt dann die zweite Frage im zweiten Abschnitt nehme ich an?
        </button>
      </h4>
    </div>
    <div id="collapseTwoTwo" class="faq panel-collapse collapse" role="tabpanel">
      <div class="panel-body"><p>Ich denke die Idee ist klar, so geht das jetzt immer weiter!</p>
      </div>
    </div>
  </div>

</div>

Dazu musste nur wie von GnuZilla beschrieben die bootstrap-collapse.min.js in den Ordner /templates/Honeygrid/usermod/javascript/Global/ geschoben werden, ansonsten waren keine weiteren Scripte notwendig.

Ein weiteres Problem war, dass lange Fragen aus den Buttons rausgelaufen sind, gerade mobile ging das gar nicht. das habe ich durch

Code:

white-space:normal;

in den Buttons gelöst. Ich sehe gerade, dass ich das zum Testen direkt in die Buttons reingepackt habe. Müsste eigentlich wieder raus und in die allgemeine css-Definition. Naja, funktioniert aber ;-).

 

Hallo und vielen Dank für die Anleitung. Ich habe noch das Problem, dass ich die CSS-Angaben nicht eingebunden kriege. Ich habe eine "_usermod-scss" im Verzeichnis "/themes/Honeygrid/styles/system/custom" angelegt. Leider funktioniert das nicht, obwohl in dem Ordner eine TXT-Datei liegt, die genau diese Vorgehensweise beschreibt.

 

Ich habe das hier nur kurz überflogen, aber ich denke Du überschreibst kein bestehenden scss.
Du legst ein neues an.
Ich würde das in
themes/DEIN-THEME/styles/custom/
in einer
_akkordeon.scss
versuchen

 

Müsste diese aber nicht noch irgendwie eingebunden werden?

 

Ich musste den Cache leeren

Danke!

 

Das sieht sehr schön aus, hast Du gut gemacht Ich war da etwas fauler und habe es in Livezilla in die Wissensdatenbank gepackt, aber erfüllt auch den Zweck

 

Hat das schonmal jemand in Malibu ausprobiert?

 

Da würde ich mich anschließen.