# \_component Collapse funktioniert nicht

**URL:** <https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380>\
**Category:** Themes & Design\
**Created:** [10. Juli 2019 um 20:48 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380 "2019-07-10T20:48:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MSTON](https://avatars.discourse-cdn.com/v4/letter/m/b9e5f3/32.png) [@MSTON](https://forum.shopware.com/u/MSTON)\
**Post date:** [10. Juli 2019 um 20:48 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/1 "2019-07-10T20:48:18Z")

</div>

Hi&nbsp;Community,

ich habe ein Basic Problem.

Bei den Versuchen, in meinem Template Inhalte mit der von Shopware gelieferten Komponente “Collapse Box” zu verschachteln, habe ich gemerkt, dass ich es nicht nur bei mir selbst nicht zum Laufen kriege.

Stattdessen reagiert bei mir das Anklicken des collapse-headers nicht mal im Beispiel durch Shopware.  
[https://developers.shopware.com/styletile/components.html#collapse](https://developers.shopware.com/styletile/components.html#collapse)

In diesem Beispiel sollte ich ja durch Anklicken des “Collapse box title”&nbsp;den entsprechenden Content “Lorem ipsum …” sehen. Aber es reagiert nicht.

Ich nutze eine aktuelle Version von Google Chrome.

Hat jemand eine Idee, wieso das nicht tut?

---

<div class="post-metadata">

**Author:** ![ChidVanid](https://avatars.discourse-cdn.com/v4/letter/c/cdc98d/32.png) [@ChidVanid](https://forum.shopware.com/u/ChidVanid)\
**Post date:** [18. Juli 2019 um 08:19 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/2 "2019-07-18T08:19:18Z")

</div>

Guden,

ich hatte da auch schon einmal geschaut und nicht wirklich was im SW JS gefunden. Ich glaube von Haus aus ist dort keine JS Funktionalität gegeben.  
Bin dann hingegangen und habe mir selbst was geschrieben. Sollte so laufen.

```
function initContentCollapse() {
  var collapseInitiatedCls = 'collapse-is-initiated';
  $('.collapse--header:not(.' + collapseInitiatedCls + ')').click(function() {
    var $this = $(this);
    $this.next().toggleClass('is--collapsed');
    $this.toggleClass('is--active');
    $this.addClass(collapseInitiatedCls);
  });
}

initContentCollapse();
$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
  initContentCollapse();
});

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![MSTON](https://avatars.discourse-cdn.com/v4/letter/m/b9e5f3/32.png) [@MSTON](https://forum.shopware.com/u/MSTON)\
**Post date:** [27. Juli 2019 um 11:52 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/3 "2019-07-27T11:52:37Z")

</div>

Hey, sorry für die späte Antwort.

Ich habe die Collapse Box tatsächlich schon anders zum Laufen bekommen.

Ich musste nur das jeweilige Modul im State Manager bei größerem Screen schon laden lassen.&nbsp;  
Dass man darauf achten muss, war mir zu dem Zeitpunkt nicht klar.

Aber danke für deine Hilfe! 🙂

---

<div class="post-metadata">

**Author:** ![HenkEvans](https://avatars.discourse-cdn.com/v4/letter/h/fbc32d/32.png) [@HenkEvans](https://forum.shopware.com/u/HenkEvans)\
**Post date:** [1. Dezember 2019 um 22:01 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/4 "2019-12-01T22:01:31Z")

</div>

Hallo zusammen,

ich bekomme die Collapse Box auch nicht zum Laufen und kann eure bisherigen Antworten nicht deuten:

- zu ChidVanid: Wo speichert man die JS-Datei?
- zu MSTON: Ja WIE um Himmels Willen&nbsp;hast du sie denn zum Laufen bekommen? Und was bedeutet „… das jeweilige Modul im State Manager“?

---

<div class="post-metadata">

**Author:** ![ChidVanid](https://avatars.discourse-cdn.com/v4/letter/c/cdc98d/32.png) [@ChidVanid](https://forum.shopware.com/u/ChidVanid)\
**Post date:** [2. Dezember 2019 um 09:26 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/5 "2019-12-02T09:26:33Z")

</div>

Du legst ne .js Datei in deinem Theme an und verweist dann via Theme.php auf diese Datei.

An deiner Stelle würde ich aber den Weg von MSTON bevorzugen.  
Den grundsätzlichen Javascript State Manager findest du im Responsive Theme.

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [2. Dezember 2019 um 10:03 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/6 "2019-12-02T10:03:05Z")

</div>

Du brauchst dazu gar kein JS.

Kannst du alles über data-attr machen =\>&nbsp;[https://github.com/shopware/shopware/blob/5.6/themes/Frontend/Responsive/frontend/\_public/src/js/jquery.collapse-panel.js#L18-L79](https://github.com/shopware/shopware/blob/5.6/themes/Frontend/Responsive/frontend/_public/src/js/jquery.collapse-panel.js#L18-L79)

---

<div class="post-metadata">

**Author:** ![MSTON](https://avatars.discourse-cdn.com/v4/letter/m/b9e5f3/32.png) [@MSTON](https://forum.shopware.com/u/MSTON)\
**Post date:** [7. Dezember 2019 um 10:57 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/7 "2019-12-07T10:57:42Z")

</div>

> [@Shopwareianer schrieb:](https://forum.shopware.com/profile/15489/Shopwareianer "Shopwareianer")
> 
> Du brauchst dazu gar kein JS.
> 
> Kannst du alles über data-attr machen =\>&nbsp;[https://.com/shopware/shopware/blob/5.6/themes/Frontend/Responsive/frontend/\_public/src/js/jquery.collapse-panel.js#L18-L79](https://github.com/shopware/shopware/blob/5.6/themes/Frontend/Responsive/frontend/_public/src/js/jquery.collapse-panel.js#L18-L79)

Da hat Shopwareianer recht.

Es müsste eigentlich auch schon funktionieren, indem du einfach das Element so aufbaust:

```
  Titel

  Hier dein Inhalt ...

  Titel

  Hier dein Inhalt ...

```

Das wiederum müsste funktionieren, da im StateManager das Plugin „swCollapsePanel“ schon im Responsive-Theme auf das Data Attribute registriert ist.

```
.addPlugin('*[data-collapse-panel="true"]', 'swCollapsePanel')

```

Ich hoffe, dass dir das soweit hilft.

Gruß  
MSTON

---

<div class="post-metadata">

**Author:** ![PhilippNiehaus](https://avatars.discourse-cdn.com/v4/letter/p/85f322/32.png) [@PhilippNiehaus](https://forum.shopware.com/u/PhilippNiehaus)\
**Post date:** [16. November 2020 um 10:33 UTC](https://forum.shopware.com/t/component-collapse-funktioniert-nicht/60380/8 "2020-11-16T10:33:34Z")

</div>

Zwar schon 1 Jahr alt, aber vielen Dank an Shopwareianer und MSTON! Funktioniert perfekt!
