Expandable/Collapsible Components

Basic Expandable

This content is hidden by default and can be revealed by clicking the header.

Perfect for additional details, supplementary information, or optional content.

<div class="expandable-section">
    <button class="expand-header" onclick="toggleSection(this)" aria-expanded="false">
        <h3>Section Title</h3>
        <span class="expand-icon" aria-hidden="true">▼</span>
    </button>
    <div class="expand-content collapsed">
        <p>Hidden content</p>
    </div>
</div>

Codex Search Section

The Birth of Athena

3 Primary Sources

Athena sprang fully formed from Zeus's head after he swallowed her mother Metis.

Hesiod's Theogony (lines 886-900)

"Zeus himself gave birth from his own head to bright-eyed Tritogeneia, the awful, the strife-stirring, the host-leader, the unwearying, the queen, who delights in tumults and wars and battles."

Homer's Iliad (Book 5.875)

"She sprang from the head of aegis-bearing Zeus, full-armed in gleaming gold."

Pindar's Olympian Ode 7

"Athena leapt from the top of her father's head with a mighty shout."

<div class="codex-section">
    <div class="codex-header">
        <h3>Topic</h3>
        <span class="codex-badge">3 Sources</span>
    </div>
    <p class="codex-summary">Summary</p>
    <div class="expandable-section">
        <button class="expand-header expand-sources" onclick="toggleSection(this)">
            <span>View Sources</span>
            <span class="expand-icon">▼</span>
        </button>
        <div class="expand-content collapsed">
            <div class="source-item">
                <h4>Source</h4>
                <blockquote>Quote</blockquote>
            </div>
        </div>
    </div>
</div>

FAQ Accordion

Greek mythology is the body of myths originally told by the ancient Greeks, concerning their gods, heroes, and the nature of the world.

The Olympian gods were the principal deities of the Greek pantheon, residing atop Mount Olympus. The twelve major Olympians were Zeus, Hera, Poseidon, Demeter, Athena, Apollo, Artemis, Ares, Aphrodite, Hephaestus, Hermes, and either Hestia or Dionysus.

The Titanomachy was a ten-year series of battles fought between the Titans, led by Cronus, and the Olympian gods, led by Zeus. The war ended with the victory of the Olympians and the imprisonment of most Titans in Tartarus.

<div class="faq-list">
    <div class="expandable-section">
        <button class="expand-header" onclick="toggleSection(this)">
            <h4>Question?</h4>
            <span class="expand-icon">▼</span>
        </button>
        <div class="expand-content collapsed">
            <p>Answer</p>
        </div>
    </div>
</div>

Multi-Level Expansion

The Greek pantheon consists of multiple generations of deities.

The primordial deities emerged at the beginning of creation: Chaos, Gaia, Tartarus, Eros, Erebus, and Nyx.

The Titans were the second generation of divine beings: Cronus, Rhea, Oceanus, Tethys, Hyperion, Theia, and others.

The Olympian gods overthrew the Titans and became the principal deities of Greek religion.

<div class="expandable-section">
    <button class="expand-header" onclick="toggleSection(this)">
        <h3>Parent</h3>
        <span class="expand-icon">▼</span>
    </button>
    <div class="expand-content collapsed">
        <div class="expandable-section">
            <button class="expand-header" onclick="toggleSection(this)">
                <h4>Child</h4>
                <span class="expand-icon">▼</span>
            </button>
            <div class="expand-content collapsed">
                <p>Nested content</p>
            </div>
        </div>
    </div>
</div>

Expandable/Collapsible Components

Basic Expandable

Click to Expand

Codex Search Section

The Birth of Athena

Hesiod's Theogony (lines 886-900)

Homer's Iliad (Book 5.875)

Pindar's Olympian Ode 7

FAQ Accordion

What is Greek mythology?

Who were the Olympian gods?

What was the Titanomachy?

Multi-Level Expansion

Greek Pantheon

Primordial Deities

Titans

Olympians