Text auf Kategorieseite "einklappen"? (Theme Dawn)

[ILWP]

Hallo, 

ich suche eine Möglichkeit, wie ich den Kategorietext auf meiner Seite "einklappbar" mache, so dass nach ein paar Zeilen mittels Symbol oder dem Wort "mehr" weiterer Text erscheint. Außerdem noch die Frage, wie ich den Text auf volle Breite bekomme. Im Editor des Themes ist die Breite nur ca. 75% des Rests. Also auch meine Produktbilder sind breiter. Kann mir jemand einen guten Tipp geben, wie ich das lösen kann?

Danke & Grüße

Nina

[Ben310]

Hey @ILWP 

Kann das verstehen, ein ausklappbarer accordion text schafft mehr platz auf der seite vor allem wenn man viel text hat. Jeder besucher zum der den text lesen moechte kann ihn dann ausklappen.

Das wird aber einen code eingriff verlangen was dein Dawn theme aus den Theme updates ausschließen kann. 

Gehe in die entsprechende Liquid-Datei, in der du den einklappbaren Text hinzufügen möchten (z.B. product-template.liquid oder collection-template.liquid). Füge den folgenden Code an der gewünschten Stelle ein:

<div class="accordion-wrapper">
  <div class="accordion-header">
    <button class="accordion-button">Mehr anzeigen</button>
  </div>
  <div class="accordion-content">
    <!-- Hier den ausklappbaren Text einfügen -->
    Ihr ausklappbarer Inhalt hier...
  </div>
</div>

<style>
  .accordion-content {
    display: none;
    overflow: hidden;
  }
</style>

<script>
  document.querySelector('.accordion-button').addEventListener('click', function() {
    var content = document.querySelector('.accordion-content');
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
</script>

Das Einstellen der Textbreite - suche im gleichen Code-Editor nach der CSS-Datei, normalerweise base.css oder im CSS Editor direkt innerhalb des Theme Editors. Füge den folgenden Code hinzu:

.dein-text-container-class {
  width: 100%;
  max-width: 100%;
}

Ersetze .dein-text-container-class durch den tatsächlichen Klassennamen des Elements, das den Text enthält.

[ILWP]

Okay, das ist natürlich nicht gewollt.. Gibt es eine Möglichkeit, den Text breiter laufen zu lassen? Oder ist das dann auch ein entsprechender Eingriff?

[Ben310]

Refresh mal oben da ich noch am schreiben war

[ILWP]

Ah, super! Das probiere ich mal!