Hallo ich komme grade nicht weiter. Kann mir mal bitte eine Helfen. Wir möchten eine Funktion um Texte ein und aus zuklappen so wie hier https://codepen.io/Idered/pen/ExYROd Code: <div> <input type="checkbox" class="read-more-state" id="post-1" /> <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p> <label for="post-1" class="read-more-trigger"></label> </div> Code: <style> .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .25s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'Show more'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'Show less'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 1px solid #ddd; border-radius: .25em; } /* Other style */ body { padding: 2%; } </style> Ich habe den in die Indexdatei über den Contenmanger eingeschrieben
du musst diesen Code ins eigene CSS im StyleEdit kopieren: Code: .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .25s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'Show more'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'Show less'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 1px solid #ddd; border-radius: .25em; } und dies ist der HTML Code den du in den Content-Manager (oder auch in ein HTML Widget im StyleEdit) kopierst und dann deinen Text schreibst. Code: <div> <input type="checkbox" class="read-more-state" id="post-1" /> <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p> <label for="post-1" class="read-more-trigger"></label> </div>
Wie so oft ist der Dominik da der leuchtende Stern (Link nur für registrierte Nutzer sichtbar.) Da gibt es ein Video wo es um FAQ geht- schau da mal. Und Agentur Schölzke hat da auch etwas: (Link nur für registrierte Nutzer sichtbar.) Vielleicht hilft dir das ja weiter ....
Hallo Michaela Danke, hab ich jetzt gemacht wie du gesagt hast. In der Vorschau von StyleEdit4 geht auch. Gespeichert. Als Widget und einmal im contentmanger in die indexdatei bei html oben rein kopiert. Der Button ist nicht zu sehen nur der erste text. Egal wie Noch eine idee? https://www.bikeshop-luechow.de/eshop/
wenn ich es auf deiner Seite richtig sehe, ist dein HTML Code nicht richtig. Bei dir fehlt eine Zeile. Nimm diesen Code: <div> <input type="checkbox" class="read-more-state" id="post-1" /> <p class="read-more-wrap"> Hier steht der Text, der immer sichtbar ist <span class="read-more-target"> Hier steht der Text, der ausgeklappt wird, wenn man auf "Show more" klickt. </span> </p> <label for="post-1" class="read-more-trigger"></label> </div> Oder nimm das Accordion-Widget aus dem StyleEdit.
ich glaube der Gambio Editor zerhaut mir immer den Code. schau mal <div> <input class="read-more-state" id="post-1" type="checkbox" /> <p class="read-more-wrap"> Hier steht der Text, der immer sichtbar ist <span class="read-more-target"> Hier steht der Text, der ausgeklappt wird, wenn man auf "Show more" klickt. </span> </p> </div> das ging jetzt zwar wenn ich deinen Code rein kopiere. Aber der sieht nach dem speichern und wieder öffnen so aus edit1: wenn ich den text da kein kopiere ohne code gehts nicht mehr nicht.
Was ist mit diesem roten Teil des Codes? Der fehlt bei dir. <div> <input type="checkbox" class="read-more-state" id="post-1" /> <p class="read-more-wrap"> Hier steht der Text, der immer sichtbar ist <span class="read-more-target"> Hier steht der Text, der ausgeklappt wird, wenn man auf Show more klickt. </span> </p> <label for="post-1" class="read-more-trigger"></label> </div>
den haut d er editor nach dem speichern raus. Ich kopiere deinen Code drück auf speichern. Und dann sieht der so aus wie oben. Verdeht und umgeschrieben und es fehlt halt ein teil.
schau mal bei @Kai Schoelzke Diesen Grundcode habe ich verwendet und einfach mit kleinen Änderungen für mich angepasst: (Link nur für registrierte Nutzer sichtbar.)