Join Join
Join

109Two-Way Accordion Panels

In this effect, we'll click through a row of panels. One stays open while the others collapse into narrow strips with a rotated label. The content slides in from the side you came from. Let's go!

HTML Structure

The structure is a horizontal row of panels. A container holds every slide, and each slide carries two layers: the full content and a compact label for the collapsed state:

<section class="mwg_effect109">
    <div class="container">
        <div class="slide">
            <div class="content">
                <p class="title">Feeling Better</p>
                <div class="bottom">
                    <img class="media" src="./assets/medias/1.png" alt="">
                    <p>Personalized care designed to support your everyday wellbeing…</p>
                </div>
            </div>
            <div class="small-title">
                <p>Feeling Better</p>
            </div>
        </div>
        <div class="slide">
            …
        </div>
    </div>
</section>

When a panel is closed, only the rotated small-title stays visible. When it opens, the content block takes over with the headline, image, and paragraph.

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try our free effects.

Try it now Try it now

(No registration or credit card needed)