Phoenix Reisen Styleguide

10 #permalink Akkordeon

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Module: Mithril | React

Das Öffnen einer Sektion ist durch einen Scrolleffekt animiert.

Die Höhe eines jeweiligen Content Containers ist grundsätzlich durch max-height auf 1000px festgelegt - wichtig für die Animation. Ist das zu viel oder zu wenig, muss der Wert explizit überschrieben werden.

Entweder durch Überschreiben der max-height in .acc-open-item oder durch Setzen des style-Attributes mittels JS auf das jew. Element. Via SCSS kann alternativ auch die Variable $acc-max-height: 1000px überschrieben werden.

Examples
Default styling
.acc-open-item
wenn gesetzt, dann offen, sonst geschlossen.
Markup 
<div>
    <article id="acc-item-0" class="acc-item acc-primary">
        <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>
    </article>
    <article id="acc-item-1" class="acc-item [modifier class] acc-secondary">
        <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 class="acc-section">
            <div class="acc-inner">
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>
    </article>
    <article id="acc-item-2" class="acc-item acc-secondary">
        <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>
    </article>
    <article id="acc-item-3" class="acc-item [modifier class] acc-primary">
        <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>
        <div class="acc-section">
            <div class="acc-inner">
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>
    </article>
    <article id="acc-item-4" class="acc-item acc-secondary">
        <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>
    </article>
    <article id="acc-item-5" class="acc-item acc-secondary">
        <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>
    </article>
</div>
Source: src/components/_accordeon.scss, line 1