Collapse/Expand

Smooth height transition using data-transition="slide-down".

Live Demo

Project Details

This section uses data-transition="slide-down" for a smooth height animation. The content slides into view when expanded and collapses smoothly when toggled.

Advanced Settings

Source

HTML + JavaScript + CSS 
<div data-component="collapsible">
    <div data-action="toggleSection1" style="cursor: pointer;">
        <strong>Section Title</strong>
        <span data-bind="section1 ? '▲' : '▼'"></span>
    </div>
    <div data-show="section1" data-transition="slide-down">
        <div>Collapsible content here.</div>
    </div>
</div>

<style>
.slide-down-enter { opacity: 0; max-height: 0; overflow: hidden; }
.slide-down-enter-active {
    opacity: 1; max-height: 500px;
    transition: opacity 0.3s, max-height 0.3s;
    overflow: hidden;
}
.slide-down-leave { opacity: 1; max-height: 500px; overflow: hidden; }
.slide-down-leave-active {
    opacity: 0; max-height: 0;
    transition: opacity 0.3s, max-height 0.3s;
    overflow: hidden;
}
</style>

<script>
wildflower.component('collapsible', {
    state: { section1: true, section2: false },
    toggleSection1() { this.section1 = !this.section1; },
    toggleSection2() { this.section2 = !this.section2; }
});
</script>

Key Points

  • data-transition="slide-down" applies CSS classes that animate max-height and opacity, the classic collapse effect
  • The max-height technique avoids needing to know content height; set it higher than your tallest section
  • overflow: hidden in the transition classes prevents content from showing outside the collapsing container
  • Forms inside collapsed sections maintain state. data-model bindings persist while hidden
  • Combine with data-render instead of data-show if you want to destroy form state when collapsed

Related documentation

Transitions →