Akkordeon in Produktbeschreibung

[gonzo88]

Hallo Community,

gibt es ein Modul oder eine (fertige) Möglichkeit in den Produktbereich/ Beschreibung Akkordeons einzubinden? Ich habe zwar im Forum Codeschnipsel für den Contentbereich gefunden, aber vielleicht gibt es ein Plugin.

Dank & Grüße
Gonzo

Linkback: https://www.modified-shop.org/forum/index.php?topic=39462.0

[hpzeller]

Du kannst im Admin product_info_x_accordion_v1.html als Templatevorlage für Produkte auswählen.

Gruss
Hanspeter

[gonzo88]

Hallo Hanspeter,

danke, ja das kannte ich.
Diese Vorlage wandelt aber ja nur die Reiter (oben) in Accordians um.

Ich bräuchte aber entweder:

- in dem Bereich/ Feld "Artikelbeschreibung" Accordians, um Zusatzinfos unterzubringen - ohne dass der Artikelbeschreibungsblock ewig lang wird

oder

- einen weiteren Reiter, unter dem ich diese Zusatzinfos unterbringen kann. In diesem Fall müsste in dem Admin-Produktbereich aber auch ein weiteres Eingabefeld sein, um diesen extra Reiter/ Seite zu befüllen.

Ich hoffe ich habe es nun besser beschrieben.

Danke & Grüße

[Buggyboy]

Hallo!

Vielleicht hilft Dir dieser Thread weiter:

https://www.modified-shop.org/forum/index.php?topic=4888.0

Da geht es aber um die Tabs (Reiter).
oder noRiddle mal anschreiben hier...

LG
peter

[gonzo88]

Danke für die Hinweise.
Habe noRiddle angeschrieben.

Die Threads beschreiben ja (soweit ich das verstehe) die Code-Anpassung von Shopdateien, was ja nicht optimal ist (bei Updates) ... oder?

[hpzeller]

Hallo gonzo88,

ein einfache Möglichkeit wie man Accordions einsetzen bzw. programmieren kann, um z.B. Texte zu segmentieren findest du hier.
https://www.w3schools.com/howto/howto_js_accordion.asp

Hier ein Beispielcode den du einfach in der Quelltext-Ansicht der Produktbeschreibung einfügen kannst.

Code: XML  [Auswählen]

<style type="text/css">
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: "+";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "–";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>

<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>

<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
 acc[i].addEventListener("click", function() {
   this.classList.toggle("active");
   var panel = this.nextElementSibling;
   if (panel.style.maxHeight){
     panel.style.maxHeight = null;
   } else {
     panel.style.maxHeight = panel.scrollHeight + "px";
   }
 });
}
</script>
 

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruss
Hanspeter

[karsta.de]

Weitere Informationen in den Produktbereich/Beschreibung mittels Akkordeons einzubinden, empfehle ich dir diese Erweiterung: MODUL: Intelligente Tabs.

BG kgd