Hallo, ich möchte in meinen Cloud Shop folgendes FAQ Script einbinden https://codepen.io/Dwebs/pen/vYvXLwm Wenn ich den Code nun einbinde inkl. der CSS, damit wird mir das zwar alles angezeigt aber es ist schon alles ausgeklappt. Wie bekomme ich den Akkordioneffekt hin? Liegt das an der externe JS? LG Andi
Code: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FAQ</title> </head> <body> <h1>Häufig gestellte Fragen</h1> <div class="faq"> <div class="faq-item"> <div class="faq-question"> Frage 1: Was ist Lorem Ipsum? <span class="toggle-answer">↓</span> </div> <div class="faq-answer">Antwort 1: Lorem Ipsum ist ein einfacher Dummy-Text der Druck- und Satzindustrie.</div> </div> <div class="faq-item"> <div class="faq-question"> Frage 2: Woher kommt Lorem Ipsum? <span class="toggle-answer">↓</span> </div> <div class="faq-answer">Antwort 2: Lorem Ipsum stammt aus einem Text von Cicero aus dem Jahr 45 v. Chr.</div> </div> <div class="faq-item"> <div class="faq-question"> Frage 3: Warum verwenden wir Lorem Ipsum? <span class="toggle-answer">↓</span> </div> <div class="faq-answer">Antwort 3: Lorem Ipsum wird verwendet, um den visuellen Eindruck eines Dokuments zu vermitteln.</div> </div> <!-- Weitere FAQ-Elemente hier einfügen --> </div> <style> .faq-item { margin: 10px; padding: 10px; cursor: pointer; } .toggle-answer { float: right; font-size: 20px; } .faq-answer { display: none; } .faq-question:hover { background-color: #f0f0f0; } </style> <script> const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach((item) => { const question = item.querySelector('.faq-question'); const answer = item.querySelector('.faq-answer'); question.addEventListener('click', () => { answer.style.display = answer.style.display === 'block' ? 'none' : 'block'; }); }); </script> </body> </html> hier ein einfacher Code ohne CSS
Hallo Medico, dein Beispiel setzt auf die Verwendung von Bootstrap, ich vermute du hast das selbe Problem wir wir damals. Gambio hat die CSS Klassen für das aufklappen nicht integriert, da dies sonst einen Konflikt mit dem Menü erzeugt. Anbei zusätzliche css Code der im StyleEdit hinzugefügt werden sollte: Code: .main-inside .faq .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .main-inside .faq .fade.in { opacity: 1; } .main-inside .faq .collapse { display: none; } .main-inside .faq .collapse.in { display: block; } .main-inside .faq tr.collapse.in { display: table-row; } .main-inside .faq tbody.collapse.in { display: table-row-group; } .main-inside .faq .collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; -webkit-transition-duration: 0.35s; -o-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; }
Das geht auch alles ohne JS und funktioniert auch Problemlos in einem Cloudshop https://www.agentur-schoelzke.de/accordion-einfach-in-gambio-integriert/ bitte bis nach ganz unten lesen
Wow danke das hat schon mal geholfen. Aber die erste Frage wird bei mir schon geöffnet angezeigt und dann nicht richtig. Auch wenn ich ein andere Frage anklicke sieht die erste komisch aus (siehe Bilder) Hat Dein css Code auswirkung auf andere Styles im Shop, so auf den ersten Blick habe ich nichts gesehen, dass was komisch aussieht. LG Andi
Hallo Andi, aktuell nimmst hast du Bootstrap 5 extra eingebunden. Im Shop ist Bootstrap 3 bereits eingebunden. Das könnte einen Konflikt erzeugen bzw. meine Regeln sind auf Basis von BS3 gemacht worden. Wenn du mir deine Seite mal schickst kann ichs mir mal kurz anschauen.
du kannst auch diesen code versuchen, er ist optisch etwas an deinem 1. angepasst und funktioniert ohne CSS Code: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FAQ</title> </head> <body> <h1>Häufig gestellte Fragen</h1> <div class="faq"> <div class="faq-item"> <div class="faq-question"> <span class="faq-icon">?</span> <span class="faq-text">Frage 1: Was ist Lorem Ipsum?</span> <span class="toggle-answer">↓</span> </div> <div class="faq-answer">Antwort 1: Lorem Ipsum ist ein einfacher Dummy-Text der Druck- und Satzindustrie.</div> </div> <div class="faq-item"> <div class="faq-question"> <span class="faq-icon">?</span> <span class="faq-text">Frage 2: Woher kommt Lorem Ipsum?</span> <span class="toggle-answer">↓</span> </div> <div class="faq-answer">Antwort 2: Lorem Ipsum stammt aus einem Text von Cicero aus dem Jahr 45 v. Chr.</div> </div> <div class="faq-item"> <div class="faq-question"> <span class="faq-icon">?</span> <span class="faq-text">Frage 3: Warum verwenden wir Lorem Ipsum?</span> <span class="toggle-answer">↓</span> </div> <div class="faq-answer">Antwort 3: Lorem Ipsum wird verwendet, um den visuellen Eindruck eines Dokuments zu vermitteln.</div> </div> <!-- Weitere FAQ-Elemente hier einfügen --> </div> <style> .faq-item { margin: 10px; padding: 10px; cursor: pointer; } .faq-icon { background-color: #FF007F; /* Dunkleres Pink */ color: white; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; margin-right: 10px; font-size: 20px; } .faq-question { display: flex; justify-content: space-between; align-items: center; } .faq-text { flex: 1; } .toggle-answer { color: #FF007F; /* Dunkleres Pink */ font-size: 24px; } .faq-answer { display: none; } .faq-question:hover { background-color: #f0f0f0; } </style> <script> const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach((item) => { const question = item.querySelector('.faq-question'); const answer = item.querySelector('.faq-answer'); question.addEventListener('click', () => { answer.style.display = answer.style.display === 'block' ? 'none' : 'block'; }); }); </script> </body> </html>