# Collapse Box

**URL:** https://forum.shopware.com/t/collapse-box/26125
**Category:** Themes & Design
**Created:** [8. April 2015 um 20:53 UTC](https://forum.shopware.com/t/collapse-box/26125 "2015-04-08T20:53:15Z")
**Posts on this page:** 5
**Page:** 1

<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: [8. April 2015 um 20:53 UTC](https://forum.shopware.com/t/collapse-box/26125/1 "2015-04-08T20:53:15Z")

</div>

Heyho - im Styletile steht ja beschreiben wie das Markup der Collapse Boxen sind. Jedoch funktioniert die eigentliche Funktion nicht. Im js Plugin collapse sehe ich hier die default Attribute, jedoch worauf beziehen sich diese ? Gibt es noch ein

mit data Attributen um den ganzen collapse header / content drum rum ? Oder was übersehe ich hier gerade 🙂

---

<div class="post-metadata">

### Author: ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)
#### Post date: [8. April 2015 um 21:18 UTC](https://forum.shopware.com/t/collapse-box/26125/2 "2015-04-08T21:18:52Z")

</div>

je nach dem, auf welchen Selektor und Viewport du das Collapse JS Plugin registrierst: Beispiel1 ` // Collapse panel .addPlugin('.btn--password, .btn--email', 'collapsePanel', ['l', 'xl']) ` Beispiel2 ` $('\*[data-collapse-panel="true"]').collapsePanel(); ` Schau mal in die jquery.shopware-responsive.js. Dann sollte es klar werden.

---

<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: [9. April 2015 um 00:40 UTC](https://forum.shopware.com/t/collapse-box/26125/3 "2015-04-09T00:40:55Z")

</div>

Perfekto ! :thumbup: Danke dir, in die Datei hatte ich noch überhaupt nicht reingeschaut. Ich mag Shopware 5 immer mehr :x

---

<div class="post-metadata">

### Author: ![Arya\_Svitkona](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/arya_svitkona/32/15319_2.png) [@Arya\_Svitkona](https://forum.shopware.com/u/Arya_Svitkona)
#### Post date: [20. Juni 2016 um 15:09 UTC](https://forum.shopware.com/t/collapse-box/26125/4 "2016-06-20T15:09:57Z")

</div>

Ciao,

Ich befasse mich soeben mit einem Accordeon Einkaufselement.  
Die HTML Ausgabe funktioniert einwandfrei, jedoch klappt die Box nicht auf / zu bei der Initialisierung (Seitenaufruf).  
Ich muss zuerst das Fenster kleiner /grösser ziehen, dass der Statemanager sozusagen die Funktion erneut abfeuert.

Setze ich einen Timeout von Anfang an, dann funktioniert es gleich.

Woran liegt das Problem?

```
(function($, window) {

    function sleep(){
        window.StateManager

            // Accordeon Menu
            .addPlugin('.accordeon--trigger', 'swCollapsePanel', ['xs', 's', 'm', 'l', 'xl'])
    }
    setTimeout(sleep, 2000);

})(jQuery, window);

```

Am Content kann es nicht liegen…da ist nur 1 Satz drin (ja genau…Lorem Ipsum ;))

&nbsp;

&nbsp;

UPDATE: Liegt daran, dass (sicher ab SW5) die Einkaufswelt mit AJAX nachgeladen wird.  
In meinem Fall wurde eine setTimeout() funktion genutzt, welche nach 2 Sek das Script ausführt -\> gibt bessere alternativen.

---

<div class="post-metadata">

### Author: ![t2oh4e](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t2oh4e](https://forum.shopware.com/u/t2oh4e)
#### Post date: [20. Juni 2016 um 15:25 UTC](https://forum.shopware.com/t/collapse-box/26125/5 "2016-06-20T15:25:14Z")

</div>

[http://forum.shopware.com/discussion/comment/163133/](http://forum.shopware.com/discussion/comment/163133/)
