Accordions without React

Accordions are used as fold out elements. You can hide content in them. Accordions that should close each other must be assigned to the same data-group attribute. Elements in the accordion head can be made clickable setting class accordion--trigger.

We recommend using the chayns-components with React. They contain much more useful elements, e.g. the PersonFinder, Tooltip and ContextMenu.

You can use the accordions also without React, using the chayns-ui:

<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>
<script src="https://api.chayns-static.space/ui/v4.0/chayns-ui.min.js"></script>

For the accordions to work, you have to run chayns.ui.accordion.init() or chayns.ui.initAll() after chayns-ui has been loaded.

Example

<div class="accordion" data-group="1">
    <div class="accordion__head">
        <div class="accordion__head__icon accordion--trigger">
            <i class="ts-angle-right"></i>
        </div>
        <div class="accordion__head__title  accordion--trigger">
             Accordion Title
        </div>
        <div class="accordion__head__right  accordion--trigger">
            <div class="badge">
                Badge
            </div>
        </div>
    </div>
    <div class="accordion__body">
        <div class="accordion__item">
            This is an accordion__item
        </div>
        <div class="accordion__item">
            This is an accordion__item
        </div>
        <div class="accordion__item">
            This is an accordion__item
        </div>
        <div class="accordion__item">
            This is an accordion__item
        </div>
        <div class="accordion accordion--wrapped">
            <div class="accordion__head">
                <div class="accordion__head__icon accordion--trigger">
                    <i class="ts-angle-right"></i>
                </div>
                <div class="accordion__head__title accordion--trigger">
                    Accordion
                </div>
            </div>
            <div class="accordion__body">
                <div class="accordion__item">
                    This is an accordion__item
                </div>
                <div class="accordion__item">
                    This is an accordion__item
                </div>
                <div class="accordion__item">
                    This is an accordion__item
                </div>
                <div class="accordion__item">
                    This is an accordion__item
                </div>
            </div>
        </div>
        <div class="accordion__item">
            This is an accordion__item
        </div>
    </div>
</div>