Home/Explore/

Accordion

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<!-- Container -->
<div style="
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom-color: transparent;
    border-radius: 4px;
">
    <!-- Each accordion item -->
    <div style="
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    ">
        <!-- Heading -->
        <div style="
            /* Center the content horizontally */
            align-items: center;
            display: flex;

            cursor: pointer;
            padding: 16px;
        ">
            <!-- The toggle icon -->
            <div style="margin-right: 12px;">...</div>

            <!-- The title -->
            <div style="
                flex: 1; /* Take remaining width */
            ">
                ...
            </div>
        </div>

        <!-- The content -->
        <div style="
            /* For selected item */
            display: block;

            /* For not selected item */
            display: none;

            border-top: 1px solid rgba(0, 0, 0, 0.3);
            padding: 16px;
        ">
            ...
        </div>
    </div>

    <!-- Repeat other item -->
    ...
</div>


<div style="
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
">
    <!-- Heading -->
    <div style="
        display: flex;
        align-items: center;
        justify-content: space-between;
    ">
        <!-- Question -->
        ...

        <!-- The toggle icon sticks to the right -->
        ...
    </div>

    <!-- Answer -->
</div>

Related patterns

Questions and answers

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!