Accordion FAQ - Neues Projekt 12

Title
HalloLogout
Title
Direkt zum Seiteninhalt
Accordion FAQ mit HTML/CSS-Code im Objekt "HTML Code"
Beispiel für Accordion-FAQ:
Frage 1: Lorem Ipsum

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.

Frage 2: Ucimus iure officia quos possimus

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.

Frage 3: Possimus cimus iure officia quos

This is a beautiful picture.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Frage 4: Officia quos possimus iure

Das ist eine Liste:


● Lorem
● Ipsum
● Officia
● Possimus
● Accusam

Lorem ipsum dolor sit amet.
Kleine Anleitung:

1) Den Original-Code gibt es hier zum Kopieren >> https://codepen.io/redesigned/pen/wvoEvqG

Als kleine Hilfe: Den von mir geänderten und erweiterten HTML- und CCS-Code des Beispiels gibt es hier als Text-Datei, siehe

>> Verwendeter HTML/CSS-Code für FAQ-Accordion (Leider werden Symbole nicht richtig dargestellt - hier ● ► ▼ zum kopieren)

2) Den CSS-Code der Einfachheit wegen komplett kopieren (evtl. Umweg über Windows Editor) und im Objekt "HTML Code" unter "Erweitert" einfügen.

3) Beim HTML-Code ist jeweils dieses Abschnitt pro Frage im Objekt "HTML Code" unter "HTML-Code" einzufügen, siehe

<details>
 <summary>Frage 1: Lorem Ipsum</summary>
 <div class="content">
   <p>
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
   </p>
   <img src="https://findelinks.de/go-blogseite/images/large-2306471.jpg" alt="">
   <p>
     Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
   </p>
 </div>
</details>

Erklärungen zum Code:

A) Der Inhalt des Abschnitts <summary> ... </summary> wird gleich angezeigt.

B) Der Inhalt des Abschnitt ...

<div class="content">
...
</div>

... wird erst nach einem Klick auf den Abschnitts <summary> ... </summary> aufgeklappt und bei erneutem Klick zugeklappt.

C) Bilder werden werden mit dem IMG-Tag und der Bildadresse eingefügt, siehe Beispiel

<img src="https://findelinks.de/go-blogseite/images/large-2306471.jpg" alt="Blaue Kaffeetasse auf braunem Schreibtisch">

Die Angabe bei alt="Beschreibung des Bildinhaltes" ist für Sehbehinderte.

D) Die Einstellungen für das Design des FAQ-Accordions - also Farben, Schriften, Ränder usw. - werden als CSS-Code unter "Erweitert" festgelegt, hier sind einige Grundkenntnisse in CSS erforderlich.




Beispiele für Änderungen im CSS-Code

Inhaltsverzeichnis:

1) Änderungen der Farben von Schrift und Hintergrund sowie abgerundete Ecken bei den Fragen
2) Abgerundete Ecken bei den Antworten
3) Text und Bild nebeneinander
4) Bilder in der Showbox öffnen



1) Änderungen der Farben von Schrift und Hintergrund sowie der Ecken bei den Fragen

a) Die Farben und Ecken im Original


b) Farben und Ecken nach der Änderung


c) Und hier die Änderungen im CSS-Code

Erklärungen zu den Zahlen im Screenshot unten:

1 - Hintergrund transparent, damit Ecken und Antworten die Hintergrundfarbe der Seite haben
2 - Hintergrundfarbe bei den Fragen
3 - Schriftfarbe der Fragen
4 - Größe beim Eckradius

----- Screenshots -----




2) Abgerundete Ecken bei den Antworten

Im CSS-Code im Objekt "HTML Code" unter "Erweitert" diese Stellen ziemlich am Ende suchen und den blau markierten Code hinzufügen.

.content {
padding: 10px;
border: 2px solid #888;
border-radius: 10px;
border-top: none;
}





3) Text und Bild nebeneinander



a) Hier der zusätzliche CSS-Code, der im Reiter "Erweitert" (z.B. am Ende) hinzugefügt wird

/* Externer CSS-Code für Bild und Text nebeneinander */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 5px;
}

.img123 {
 width: 350px;
}

.text {
 text-align: left;
 font-size: 15px;
}

b) Und hier der komplette HTML-Code-Abschnitt für eine Frage und die Antwort mit Bild

Anmerkungen:

  1. Erscheint der DIV-Abschnitt mit class="image123" (rot markiert) in der Reihenfolge zuerst, dann wird das Bild links platziert.
  2. Wenn zuerst der DIV-Abschnitt mit class="text" (blau markiert) kommt, dann wird das Bild rechts platziert.
  3. Da HTML-Code für ungeordnete Listen nicht funktionierte - ??? - habe ich die Listenpunkte durch das Symbol ● ersetzt.

Code für Anmerkung Nr. 1:

<details>
 <summary>Frage 3: Officia quos possimus iure</summary>
 <div class="content">

<div class="container">
     <div class="image123">
       <img src="https://findelinks.de/go-blogseite/images/large-2306471.jpg">
     </div>
     <div class="text">
       <h1>This is a beautiful picture.</h1>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     </div>
   </div>
</div>
</details>

<details>
<summary>Frage 3: Officia quos possimus iure</summary>
<div class="content">

Code für Amerkung Nr. 2:

<div class="container">
    <div class="text">
      <h1>This is a beautiful picture.</h1>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    <div class="image123">
      <img src="https://findelinks.de/go-blogseite/images/large-2306471.jpg">
    </div>
  </div>
</div>
</details>

Code für Anmerkung Nr. 3

<h1>Das ist eine Liste:</h1>
       <br>
       ● Lorem<br>
       ● Ipsum<br>
       ● Officia<br>
       ● Possimus<br>
       ● Accusam<br>
       <br>Lorem ipsum dolor sit amet.

(Das Symbol kann hier kopiert werden)



4) Bilder in der Showbox öffnen (bei den Fragen 2 bis 4 im Beispiel ganz am Anfang)

a) Bilder normal im Text - Bild im Showbox-Fenster öffnen - kompletter Abschnitt für Frage und Antwort

<details>
 <summary>Frage 2: Ucimus iure officia quos possimus</summary>
 <div class="content">
   <p>
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum
   </p>
<a href="./images/coffee-2306471_1920.jpg" onclick ="return x5engine.imShowBox({ media:[{type: 'iframe', url: './images/coffee-2306471_1920.jpg', width: 1920, height: 1080, description: ''}]}, 0, this);"><img src="./images/coffee-2306471_1920.jpg" title="" alt="" width="360" height="240" />
</a>
<p>

     Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
   </p>
 </div>
</details>

b) Bilder und Text nebeneinander - Bild im Showbox-Fenster öffnen - - kompletter Abschnitt für Frage und Antwort

<details>
 <summary>Frage 3: Officia quos possimus iure</summary>
 <div class="content">

<div class="container">
     <div class="image123">
     <a href="./images/cosmos-3711568_1920.jpg" onclick ="return x5engine.imShowBox({ media:[{type: 'iframe', url: './images/cosmos-3711568_1920.jpg', width: 1920, height: 1080, description: ''}]}, 0, this);"><img src="./images/cosmos-3711568_1920.jpg" title="" alt="" width="250" height="170" /> </a>
     </div>
     <div class="text">
       <h1>This is a beautiful picture.</h1>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     </div>
   </div>
</div>
</details>
 
Anmerkung:

Relative URLs - wie z.B. ./images/Bild_123. jpg - werden nicht in der Vorschau angezeigt, sondern erst nach dem Export ins Internet.






Impressum - Datenschutz - Newsletter
Zurück zum Seiteninhalt