Phoenix Reisen Styleguide

10 #permalink Akkordion

Toggle example guides Toggle HTML markup

Durch das Setzen der Klasse .acc-animated auf .acc-section kann das Öffnen und Schließen einer Sektion (s.u.) animiert werden. Sie fährt dann raus und rein.

Examples
Default styling
Hafen 1 Ausflug in die Natur

Content

Content

Content

Content

Content

Ausflug in die Natur

Content

Content

Content

Content

Content

Hafen 2

Content

Content

Ausflug in die Natur Ausflug in die Natur
.acc-section--open
wenn gesetzt, dann offen, sonst geschlossen.
Hafen 1 Ausflug in die Natur

Content

Content

Content

Content

Content

Ausflug in die Natur

Content

Content

Content

Content

Content

Hafen 2

Content

Content

Ausflug in die Natur Ausflug in die Natur
Markup
<div>
    <a href="javascript:" class="acc-opener">
        <span><i class="fas fa-ship mr1"></i> Hafen 1</span>
        <i class="fas fa-chevron-up ml1"></i>
    </a>
    <a href="javascript:" class="acc-opener acc-opener--grayed">
        <span><i class="fas fa-leaf mr1"></i> Ausflug in die Natur</span>
        <i class="fas fa-chevron-down ml1"></i>
    </a>
    <section class="acc-section [modifier class]">
        <div class="acc-inner">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </section>
    <a href="javascript:" class="acc-opener acc-opener--grayed">
        <span><i class="fas fa-leaf mr1"></i> Ausflug in die Natur</span>
        <i class="fas fa-chevron-up ml1"></i>
    </a>
    <section class="acc-section">
        <div class="acc-inner">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </section>
    <a href="javascript:" class="acc-opener">
        <span><i class="fas fa-ship mr1"></i> Hafen 2</span>
        <i class="fas fa-chevron-up ml1"></i>
    </a>
    <section class="acc-section [modifier class]">
        <div class="acc-inner">
            <p>Content</p>
            <p>Content</p>
        </div>
    </section>
    <a href="javascript:" class="acc-opener acc-opener--grayed">
        <span><i class="fas fa-leaf mr1"></i> Ausflug in die Natur</span>
        <i class="fas fa-chevron-up ml1"></i>
    </a>
    <a href="javascript:" class="acc-opener acc-opener--grayed">
        <span><i class="fas fa-leaf mr1"></i> Ausflug in die Natur</span>
        <i class="fas fa-chevron-up ml1"></i>
    </a>
</div>
Source: src/components/_accordeon.scss, line 1