FAQ als HTML und CSS

FAQ mit Texten links und Bildern rechts

Erstellt mit WebSite X5 und dem Objekt "HTML Code" sowie HTML-, CSS- und Javascript-Code.

Eine Anleitung und den erforderlichen Code finden sie unter dem FAQ-Beispiel.

Frage 1: Was gibt es an Weihnachten?

Eine schöne Weihnachtsdekoration mit brennender Kerze.

Frage 2: Was gibt es oft im Garten?

Schnecken mit und ohne Gehäuse.

Frage 3: Was gibt es zum Mittagessen?

Eine leckere Mahlzeit schön serviert.

Verwendeter Code im Objekt "HTML Code":

Hinweise zum Code (Code weiter unten), zu Einstellungen (Hintergrund, Rand usw.) und zu den Bildadressen:

Die blau markierten Stellen auf jeden Fall anpassen, sonst nur mit entsprechenden Kenntnissen.
Bei Erweiterung die Abschnitte von <div class="faq-item" onclick="showImage('img1', this)"> bis </div> kopieren und darunter hinzufügen, dabei auch die Zahlen (z.B. img4) fortlaufend zählend.
Bei Erweiterung natürlich auch die Liste der Bilder bei  erweitern und die Zahlen fortlaufend (z.B. id="img4").
Den Javascript-Teil von <script> bis </script> nur bei guten JavaScript-Kenntnissen ändern.
Den CSS-Code im Reiter "Erweitert" nur bei ausreichenden CSS-Kenntnissen ändern.
Für die Hintergrundfarbe, den Rand und die abgerundeten Ecken das Objekt "HTML Code" im Raster markieren und oben auf "Stil" klicken, hier finden sich die Einstellmöglichkeiten.
Die Bilder können mit dem FTP-Popup-Fenster von WebSite X5 auf den Webspace geladen werden (siehe unter "5 Export > Export der Webseite ins Internet" - hier das Symbol rechts bei "Zielverzeichnis" anklicken). Alternative: Eine Seite mit vielen Bild-Objekten (Unter "3 Sitemap" auf "Verborgen" eingestellt), die dann als Online-Bilderarchiv dient und von der die Online-Bildadressen kopiert werden.

Anmerkung: Der Original-Code wurde von der Google KI erstellt und von mir ein klein wenig geändert.

HTML Farbtabelle - für Farbänderungen im CSS-Code unter B) >> https://bfw.ac.at/020/farbtabelle.html

A) Im Reiter "HTML-Code" folgenden Code einfügen:

<div class="faq-question">Frage 1: Was gibt es an Weihnachten?</div>

<div class="faq-answer">Eine schöne Weihnachtsdekoration mit brennender Kerze.</div>

</div>

<div class="faq-question">Frage 2: Was gibt es oft im Garten?</div>

<div class="faq-answer">Schnecken mit und ohne Gehäuse.</div>

</div>

<div class="faq-question">Frage 3: Was gibt es zum Mittagessen?</div>

<div class="faq-answer">Eine leckere Mahlzeit schön serviert.</div>

</div>

</div>

function showImage(imageId, element) {

// Alle Bilder ausblenden

const images = document.querySelectorAll('.faq-image');

images.forEach(img => img.classList.remove('active'));

// Aktives Bild einblenden

document.getElementById(imageId).classList.add('active');

// FAQ-Item Highlight

const items = document.querySelectorAll('.faq-item');

items.forEach(item => item.classList.remove('active'));

element.classList.add('active');

}

</script>

B) Im Reiter "Erweitert" folgenden Code einfügen:

.faq-container {

display: flex;

gap: 20px;

max-width: 1200px;

margin: 0 auto;

}

/* Linke Seite: FAQ */

.faq-wrapper { flex: 1; }

.faq-item { margin-bottom: 10px; border: 3px solid chocolate; border-radius: 5px; }

.faq-question {

padding: 15px;

cursor: pointer;

background-color: sandybrown;

font-weight: bold;

text-align: left;

transition: background 0.3s;

}

.faq-question:hover { background-color: lightsalmon; }

.faq-answer {

padding: 0 15px;

max-height: 0;

text-align: left;

overflow: hidden;

transition: opacity 1s ease-in-out;

}

/* Aktiv-Zustand für FAQ */

.faq-item.active .faq-answer { padding: 15px; max-height: 200px; }

.faq-item.active .faq-question { background-color: darksalmon; }

/* Rechte Seite: Bild */

.image-wrapper {

flex: 1;

display: flex;

justify-content: center;

align-items: flex-start;

position: sticky; /* Bleibt beim Scrollen sichtbar */

transition: opacity 1s ease-in-out;

top: 20px;

height: 500px;

}

.faq-image {

max-width: 100%;

max-height: 100%;

border-radius: 5px;

display: none; /* Erst alle Bilder verstecken */

}

.faq-image.active { display: block; } /* Nur aktives Bild anzeigen */

/* RESPONSIVE: Untereinander bei schmalem Bildschirm */

@media (max-width: 600px) {

.faq-container { flex-direction: column; }

.image-wrapper { position: static; height: auto; margin-bottom: 20px; }

.faq-image { max-height: 300px !important; }

}