# Artikeldetail-Tabs als CollapsedPanel (Accordion) anstatt OffcanvasButton

**URL:** <https://forum.shopware.com/t/artikeldetail-tabs-als-collapsedpanel-accordion-anstatt-offcanvasbutton/56221>\
**Category:** Themes & Design\
**Created:** [5. November 2018 um 14:52 UTC](https://forum.shopware.com/t/artikeldetail-tabs-als-collapsedpanel-accordion-anstatt-offcanvasbutton/56221 "2018-11-05T14:52:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![work](https://avatars.discourse-cdn.com/v4/letter/w/e99b99/32.png) [@work](https://forum.shopware.com/u/work)\
**Post date:** [5. November 2018 um 14:52 UTC](https://forum.shopware.com/t/artikeldetail-tabs-als-collapsedpanel-accordion-anstatt-offcanvasbutton/56221/1 "2018-11-05T14:52:39Z")

</div>

Hallo zusammen,

ich möchte mein Artikelbeschreibung-Tab auf der Artikeldetailansicht auf mobilen Endgeräten (Viewport: XS/S) nicht per OffcanvasButton, sondern per Accordion also via “swCollapsePanel” realisieren.

Ich habe bereits versucht in der “jquery.shopware-responsive.js” folgendes zu ändern:

**Auskommentieren von:**  
&nbsp;

```
        .addPlugin('.tab-menu--product .tab--container', 'swOffcanvasButton', {
            titleSelector: '.tab--title',
            previewSelector: '.tab--preview',
            contentSelector: '.tab--content'
        }, ['xs'])

```

**Hinzufügen von:**

```
        .addPlugin('.tab-menu--product .tab--header', 'swCollapsePanel', {
            'contentSiblingSelector': '.tab--content'
        }, ['xs', 's'])

```

Leider funktioniert dieser Ansatz nicht. Die Artikelbeschreibung wird ohne OffcanvasButton komplett angezeigt, aber es ist kein Accordion-Funktion zu sehen.

Die Anweisung:

```
        .addPlugin('.tab-menu--cross-selling .tab--header', 'swCollapsePanel', {
            'contentSiblingSelector': '.tab--content'
        }, ['xs', 's'])

```

für die Cross-Selling-Artikel scheinen aber zu funktionieren?

Hat jmd von euch eine Idee?  
&nbsp;

---

<div class="post-metadata">

**Author:** ![work](https://avatars.discourse-cdn.com/v4/letter/w/e99b99/32.png) [@work](https://forum.shopware.com/u/work)\
**Post date:** [6. November 2018 um 07:14 UTC](https://forum.shopware.com/t/artikeldetail-tabs-als-collapsedpanel-accordion-anstatt-offcanvasbutton/56221/2 "2018-11-06T07:14:43Z")

</div>

Hat hierzu niemand eine Idee?

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [6. November 2018 um 16:52 UTC](https://forum.shopware.com/t/artikeldetail-tabs-als-collapsedpanel-accordion-anstatt-offcanvasbutton/56221/3 "2018-11-06T16:52:07Z")

</div>

Hallo,

wie hast du denn in der jquery.shopware-responsive.js das auskommentiert und geändert? Dir ist aber schon bewusst, das man nie, wirklich nie, Änderungen in den Bare- und Responsive Theme - Dateien vornehmen darf, oder? Die Änderungen würden unter anderem bei jedem Update wieder komplett überschrieben.

Änderungen gehören immer in ein eigenes Theme, das im Bestfall vom Responsive Theme ableitet.

Grüße

Sebastian

---

<div class="post-metadata">

**Author:** ![econcess](https://avatars.discourse-cdn.com/v4/letter/e/f17d59/32.png) [@econcess](https://forum.shopware.com/u/econcess)\
**Post date:** [27. Februar 2019 um 16:23 UTC](https://forum.shopware.com/t/artikeldetail-tabs-als-collapsedpanel-accordion-anstatt-offcanvasbutton/56221/4 "2019-02-27T16:23:03Z")

</div>

> [@work schrieb:](https://forum.shopware.com/profile/29196/work "work")
> 
> Hallo zusammen,
> 
> ich möchte mein Artikelbeschreibung-Tab auf der Artikeldetailansicht auf mobilen Endgeräten (Viewport: XS/S) nicht per OffcanvasButton, sondern per Accordion also via „swCollapsePanel“ realisieren.
> 
> Ich habe bereits versucht in der „jquery.shopware-responsive.js“ folgendes zu ändern:
> 
> **Auskommentieren von:**  
> &nbsp;
> 
> .addPlugin(‚.tab-menu–product .tab–container‘, ‚swOffcanvasButton‘, {  
> titleSelector: ‚.tab–title‘,  
> previewSelector: ‚.tab–preview‘,  
> contentSelector: ‚.tab–content‘  
> }, [‚xs‘])
> 
> **Hinzufügen von:**
> 
> .addPlugin(‚.tab-menu–product .tab–header‘, ‚swCollapsePanel‘, {  
> ‚contentSiblingSelector‘: ‚.tab–content‘  
> }, [‚xs‘, ‚s‘])
> 
> Leider funktioniert dieser Ansatz nicht. Die Artikelbeschreibung wird ohne OffcanvasButton komplett angezeigt, aber es ist kein Accordion-Funktion zu sehen.
> 
> Die Anweisung:
> 
> .addPlugin(‚.tab-menu–cross-selling .tab–header‘, ‚swCollapsePanel‘, {  
> ‚contentSiblingSelector‘: ‚.tab–content‘  
> }, [‚xs‘, ‚s‘])
> 
> für die Cross-Selling-Artikel scheinen aber zu funktionieren?
> 
> Hat jmd von euch eine Idee?  
> &nbsp;

Prinzipiell ist das schon der richtige Gedanke. Ich würde jedoch ersteinmal eine passende Struktur in einer Datei&nbsp;&nbsp;/themes/Frontend/DEIN\_THEME/frontend/detail/tabs.tpl anlegen und dann in einer Javascript-Datei aus einem eigenen Theme das passende Plugin aktivieren. Z.B.:

```
window.StateManager

.addPlugin('.tab-menu--product-details .tab--header', 'swCollapsePanel', {

                'contentSiblingSelector': '.tab--content'

}, ['xs', 's', 'm','l','xl'])

```

Einen ausführlichen Lösungsansatz findest Du dazu hier:&nbsp;[https://www.econcess.de/blog/14-onlineshop-erstellung/182-onlineshops-mit-shopware-akkordeon-statt-tab-fuer-artikelbeschreibung](https://www.econcess.de/blog/14-onlineshop-erstellung/182-onlineshops-mit-shopware-akkordeon-statt-tab-fuer-artikelbeschreibung). Bei Fragen jederzeit melden!

---

<div class="post-metadata">

**Author:** ![loeffel](https://avatars.discourse-cdn.com/v4/letter/l/ecc23a/32.png) [@loeffel](https://forum.shopware.com/u/loeffel)\
**Post date:** [2. Juli 2019 um 12:49 UTC](https://forum.shopware.com/t/artikeldetail-tabs-als-collapsedpanel-accordion-anstatt-offcanvasbutton/56221/5 "2019-07-02T12:49:44Z")

</div>

Versuch mal

zu entfernen, so dass tab–header und tab–content direkt aufeinander folgen.