Übersicht und Details Ansicht in HTML und CSS

Question

Ich möchte eine Liste wie eine Tabelle machen und wenn man auf eine Zeile klickt sollen sich darunter Details dazu öffnen. So wie unter dem Punkt Sicherheitsrisiken auf dieser Seite. https://support.microsoft.com/de-de/topic/kb4072698-windows-server-und-azure-stack-hci-anleitung-zum-schutz-vor-siliziumbasierten-mikroarchitektonischen-schwachstellen-und-seitenkanalschwachstellen-durch-spekulative-ausf%C3%BChrung-2f965763-00e2-8f98-b632-0d96f30c8c8e

Answer 1

Hier hast du ein einfaches Accordion Menü mit HTML, CSS und etwas Javascript.

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    .accordion {
        width: 100%;
        max-width: 600px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .accordion-item {
        border-bottom: 1px solid #ddd;
    }
    .accordion-item:last-child {
        border-bottom: none;
    }
    .accordion-header {
        background-color: #f7f7f7;
        padding: 15px;
        cursor: pointer;
        font-weight: bold;
        transition: background-color 0.3s;
    }
    .accordion-header:hover {
        background-color: #e2e2e2;
    }
    .accordion-content {
        display: none;
        padding: 15px;
        background-color: #fafafa;
    }
    .accordion-content p {
        margin: 0;
    }
</style>

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
            Sicherheitsrisiko A - Aktiv
        </div>
        <div class="accordion-content">
            <p>Details zu Sicherheitsrisiko A: Dieses Risiko kann zu Datenlecks führen. Es wird empfohlen, die neueste Sicherheitsaktualisierung zu installieren.</p>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
            Sicherheitsrisiko B - Inaktiv
        </div>
        <div class="accordion-content">
            <p>Details zu Sicherheitsrisiko B: Dieses Risiko betrifft ältere Betriebssystemversionen und hat keine Auswirkungen auf die neueste Version.</p>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
            Sicherheitsrisiko C - Aktiv
        </div>
        <div class="accordion-content">
            <p>Details zu Sicherheitsrisiko C: Ein potenzielles Problem, das durch Sicherheitslücken in bestimmten Hardwarekomponenten verursacht wird.</p>
        </div>
    </div>
</div>

<script>
function toggleAccordion(header) {
    // Alle Inhalte schließen
    document.querySelectorAll('.accordion-content').forEach(content => {
        content.style.display = 'none';
    });

    // Aktuellen Inhalt einblenden
    const content = header.nextElementSibling;
    if (content.style.display === 'none' || content.style.display === '') {
	content.style.display = 'block';
    }
}
</script>