JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="Sempervivum, post: 12184, member: 3917"] Hallo @AlSants, ich versuch's mal, ohne das HTML gesehen zu haben: Solch ein Problem kann man sehr leicht lösen, indem man die Elemente, auf die sich das CSS beziehen soll, durch eine Klasse eingrenzt. Also bei den details und summary jeweils ein Klasse hinzu fügen: [CODE]<details class="faq"> <summary class="faq">Some details</summary> <p>More info about the details.</p> </details>[/CODE] Und dann im CSS darauf beziehen: [CODE] body {padding: 2rem;} details.faq {background: #FFFFFF; border: 1px solid #121212; border-radius: 3px; margin-bottom: 1.5rem;} summary.faq {background: #BEE3DA; color: #121212; cursor: pointer; padding: 1rem;} .akkordeon-inhalt {padding: 1rem 1rem 1px 1rem;} summary.faq::before { padding-right: .25rem; content: '+ '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle closed */ } details.faq[open] summary::before { padding-right: .25rem; font-style: italic; content: '- '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle open */ } /* Styling the summary in case of open 'details' */ details.faq[open] summary { font-style: italic; border-radius: 3px 3px 0 0; } /* Der verzögerungseffekt */ details.faq[open] summary.faq ~ * {animation: sweep .5s ease-in-out;} @keyframes sweep { 0% {opacity: 0; margin-left: 0px} 100% {opacity: 1; margin-left: 0px} } [/CODE] Möglicher Weise das gleiche auch bei .accordeon-inhalt. [/QUOTE]