# Toggle Menu

**URL:** <https://forum.shopware.com/t/toggle-menu/32516>\
**Category:** Themes & Design\
**Created:** [25. November 2015 um 11:03 UTC](https://forum.shopware.com/t/toggle-menu/32516 "2015-11-25T11:03:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Goethe](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@Goethe](https://forum.shopware.com/u/Goethe)\
**Post date:** [25. November 2015 um 11:03 UTC](https://forum.shopware.com/t/toggle-menu/32516/1 "2015-11-25T11:03:43Z")

</div>

Hallo, ich scheitere grade daran ein Toogle Menü einzubinden. Folgendes habe ich getan: 1. In der Theme.php meine .js Datei eingebunden: [code]\<?php namespace Shopware\Themes\MEINTEMPLATE;

use Shopware\Components\Form as Form;

class Theme extends \Shopware\Components\Theme  
{  
protected $extend = ‘Responsive’;

```
protected $name = <<<'SHOPWARE_EOD'

```

Theme von [MeinerWebseite.de](http://MeinerWebseite.de)  
SHOPWARE\_EOD;

```
protected $description = <<<'SHOPWARE_EOD'

```

Theme von [MeinerWebseite.de](http://MeinerWebseite.de)  
SHOPWARE\_EOD;

```
protected $author = <<<'SHOPWARE_EOD'

```

Mein Author  
SHOPWARE\_EOD;

```
protected $license = <<<'SHOPWARE_EOD'

```

SHOPWARE\_EOD;

```
protected $javascript = array(
'src/js/meintogglemenu.js'

```

);

```
public function createConfig(Form\Container\TabContainer $container)
{
}

```

}

[/code]

1. Javascript Datei erstellt in meinem Template unter /src/js/meintogglemenu.js mit folgendem Inhalt:

[code]$(function () {  
StateManager  
// Collapse panel  
.addPlugin(’.collapse–header, .collapse–content’, ‘collapsePanel’, [‘l’, ‘xl’])

});[/code]

Dann habe ich versucht das Menu mit folgendem Code aufzurufen, leider tut sich nichts:

[code]

 Collapse box title

This content will be shown by the is–collapsed class.

Collapse box title

Lorem ipsum dolor

Collapse box title

Lorem ipsum dolor  
[/code] Welchen Denkfehler habe ich drin? ☹

---

<div class="post-metadata">

**Author:** ![Goethe](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@Goethe](https://forum.shopware.com/u/Goethe)\
**Post date:** [26. November 2015 um 09:02 UTC](https://forum.shopware.com/t/toggle-menu/32516/2 "2015-11-26T09:02:43Z")

</div>

Keiner? ☹

---

<div class="post-metadata">

**Author:** ![Goethe](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@Goethe](https://forum.shopware.com/u/Goethe)\
**Post date:** [3. Dezember 2015 um 12:50 UTC](https://forum.shopware.com/t/toggle-menu/32516/3 "2015-12-03T12:50:06Z")

</div>

Bitte helft mir…

---

<div class="post-metadata">

**Author:** ![Misengo](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/misengo/32/21446_2.png) [@Misengo](https://forum.shopware.com/u/Misengo)\
**Post date:** [28. Dezember 2015 um 16:41 UTC](https://forum.shopware.com/t/toggle-menu/32516/4 "2015-12-28T16:41:16Z")

</div>

[quote=“Goethe”]Bitte helft mir…[/quote] Würde mich auch über eine Antwort freuen.:thumbup:

---

<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:** [28. Dezember 2015 um 17:08 UTC](https://forum.shopware.com/t/toggle-menu/32516/5 "2015-12-28T17:08:26Z")

</div>

Du meinst wohl eher das Collapse Plugin und nicht ein “toggle menu” oder? -\> [https://github.com/shopware/shopware/bl … e-panel.js](https://github.com/shopware/shopware/blob/5.1/themes/Frontend/Responsive/frontend/%5C_public/src/js/jquery.collapse-panel.js) Und nehme mal den absoluten Namen [swCollapsePanel](https://github.com/shopware/shopware/blob/5.1/themes/Frontend/Responsive/frontend/%5C_public/src/js/jquery.collapse-panel.js#L7) nicht den Alias, dann geht es. `$(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'swCollapsePanel', ['l', 'xl']) });` Möchtest du weitere Parameter übergeben, würdest du es so schreiben: `$(function () { StateManager // Collapse with param .addPlugin('.collapse--wrapper, .collapse--header', 'swCollapsePanel', { animationSpeed: 500, }, ['l', 'xl']) });` .collapse-wrapper ist indem Fall die Class welche alle collapse Elemente umfasst. Die möglichen Parameter stehen in den default Werten des Plugins: [https://github.com/shopware/shopware/bl … js#L18-L68](https://github.com/shopware/shopware/blob/5.1/themes/Frontend/Responsive/frontend/%5C_public/src/js/jquery.collapse-panel.js#L18-L68)

---

<div class="post-metadata">

**Author:** ![Bosche](https://avatars.discourse-cdn.com/v4/letter/b/8dc957/32.png) [@Bosche](https://forum.shopware.com/u/Bosche)\
**Post date:** [22. Januar 2016 um 10:35 UTC](https://forum.shopware.com/t/toggle-menu/32516/6 "2016-01-22T10:35:11Z")

</div>

Hallo in die Runde. Ich versuche auch gerade eine Collapse Box einzufügen, bin allerdings auch noch relativ unbeholfen, was Javascript etc angeht. Ich verwende ein Childtheme auf Basis eines gekauften Templates. Habe jetzt folgendes versucht: Theme.php [code]\<?php namespace Shopware\Themes\MeinTheme;

use Shopware\Components\Form as Form;

class Theme extends \Shopware\Components\Theme  
{  
protected $extend = ‘GekauftesTheme’;

```
protected $name = <<<'SHOPWARE_EOD'

```

GekauftesTheme MeinTheme  
SHOPWARE\_EOD;

```
protected $description = <<<'SHOPWARE_EOD'

```

SHOPWARE\_EOD;

```
protected $author = <<<'SHOPWARE_EOD'

```

MeinAdmin  
SHOPWARE\_EOD;

```
protected $javascript = array(

```

‘src/js/collapse-panel.js’);

```
protected $license = <<<'SHOPWARE_EOD'

```

MeineLizenz

```
public function createConfig(Form\Container\TabContainer $container)
{
}

```

}[/code]

unter src/js/collapse-panel.js

[code]  
$(function ()  
{  
StateManager  
// Collapse with param  
.addPlugin(’.collapse–wrapper, .collapse–header’, ‘swCollapsePanel’, {  
animationSpeed: 500,  
}, [‘l’, ‘xl’])

});[/code]

und zu guter Letzt habe ich folgendes HTML Element in die Einkaufwelt eingefügt:

[code]

 Collapse box title

This content will be shown by the is–collapsed class.

Collapse box title

Lorem ipsum dolor

Collapse box title

Lorem ipsum dolor  
[/code] Habe ich noch etwas vergessen oder falsch eingetragen?

---

<div class="post-metadata">

**Author:** ![Bosche](https://avatars.discourse-cdn.com/v4/letter/b/8dc957/32.png) [@Bosche](https://forum.shopware.com/u/Bosche)\
**Post date:** [25. Januar 2016 um 08:03 UTC](https://forum.shopware.com/t/toggle-menu/32516/7 "2016-01-25T08:03:51Z")

</div>

Push

---

<div class="post-metadata">

**Author:** ![konsi](https://avatars.discourse-cdn.com/v4/letter/k/eada6e/32.png) [@konsi](https://forum.shopware.com/u/konsi)\
**Post date:** [3. Februar 2016 um 16:25 UTC](https://forum.shopware.com/t/toggle-menu/32516/8 "2016-02-03T16:25:19Z")

</div>

Hi, also ich hatte es immer mit folgende Javascipt gehabt, was bei mir jetzt aber seit dem Update heute auf 5.1.2 nicht mehr läuft…

&nbsp;

```
$(function () {

 StateManager

// Collapse panel

.addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['xs', 's', 'm', 'l', 'xl'])  

});
$('.collapse--content *').click(function( event ) {
    event.stopPropagation();
});

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![useg](https://avatars.discourse-cdn.com/v4/letter/u/df705f/32.png) [@useg](https://forum.shopware.com/u/useg)\
**Post date:** [3. Februar 2016 um 18:38 UTC](https://forum.shopware.com/t/toggle-menu/32516/9 "2016-02-03T18:38:19Z")

</div>

@konsi,

Kayyy hat doch schon eine Antwort darauf gegeben, hast es&nbsp;mal mit&nbsp;&nbsp; **‚swCollapsePanel‘** &nbsp;statt&nbsp; **‚collapsePanel‘** versucht?

Gruß Uwe

&nbsp;

**Edit:** Gerade gesehen das du dir die Frage schon selbst beantwortet hast: [http://forum.shopware.com/discussion/comment/150911/#Comment\_150911](http://forum.shopware.com/discussion/comment/150911/#Comment_150911)