Neu Artikel accordion bei einzelnen Artikeln

[igel-max]

Hallo,

weiss zufällig jemand wie ich es machen kann- ich möchte bei jeden Artikel in Beschreibung folgendes "accordion" machen.
wenn ich es aber so mache dann ist es in Vorschau immer so das bei mehreren Artikeln immer nur das erste "accordion" aufgeht.
Wie bekomme ich es hin das jedes Artikel seine eigenes "accordion" hat.
Stehe in Moment auf dem Schlauch??

Meine Code:
<div class="accordioncontact">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="first-click">
<i class="fa fa-plus" aria-hidden="true"></i>
<i class="fa fa-minus" aria-hidden="true"></i>
Versandinformationen<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div style="color: black" class="panel-body">
<p></i><span style="color: blue"><br />Lieferung <strong><span style="color: red">+ 100,00 Euro</span></strong> Stück<br /><span class="st"><font color="#000000">Lieferung frei Bordsteinkante ohne Vertragen und Montage<br /></font></span><span style="color: black">(Artikel Zusammengebaut-Auspacken/Abladen fertig) <br />Es fallen keine weiteren Versandkosten ein.<br />Stückpreis ist Brutto inkl. MwSt<hr />
<p><i class="fa fa-truck"></i>&nbsp; Lieferung: Paket DHL Sonderversand</p>
<p><i class="fa fa-eur"></i>&nbsp; Versand: Spedition</p>
<p><i class="fa fa-play "></i>&nbsp; Artikel Lieferung: zusammengebaut</p>
<p><i class="fa fa-wrench"></i>&nbsp; Montage : nicht möglich!</p>
<p><i class="fa fa-phone"></i>&nbsp; Tel Avis: nicht möglich!</p>
<p><i class="fa fa-thumbs-up"></i>&nbsp; Mail Avis/ Tracking Code: Inklusive am Tag des Versandes</p>
<p><i class="fa fa-automobile"></i>&nbsp;<b>Abholung:</b> <a href="https://www.igel-max.de/Wo-Sie-uns-finden" target="_blank">Lager Schwarzach</a> ist nach Terminvereinbarung möglich</p>
<p><i class="fa fa-envelope"></i>&nbsp; Sie haben noch Fragen?: <a href="mailto:info@igel-max.de">info@igel-max.de</a>
</p>
</div>
</div>
</div>

<hr>
</section>
</div>

Sehen kann man es hier: https://www.igel-max.de/Total-Ausverkauf
Erste 2 Artikel wenn man das erste Anklick geht richtige auf wenn man das zweite Anklickt geht das bei ersten Artikel auf anstatt bei den 2???

 

[FPrüfer]

Hallo,
der Container

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

muss eine ID bekommen, die auch bei mehrfachem Vorkommen eindeutig ist. Dazu könnte man z.B. die Artikel-ID zusätzlich mit aufnehmen.

<div class="panel-group" id="accordion_2019">
...
    <a data-toggle="collapse" data-parent="#accordion_2019" href="#collapseOne" class="first-click">
...

 

[igel-max]

nein das ist es nicht :+)

 

[FPrüfer]

nein das ist es nicht :+)

Dann ist ggfs. noch ein weiterer Fehler drin, aber die eindeutige ID ist Grundvoraussetzung damit die mehrfachen Accordions funktionieren!