Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

        
        
        <div>
        <div class="flex flex-wrap items-center gap-2">
        <a href="javascript:void(0)" class="btn bg-primary text-white rounded-lg" data-collapse-btn>
            Link with click
        </a>
        <button type="button" class="btn bg-primary text-white rounded-lg" data-collapse-btn>
            Button with click
        </button>
        </div>
        <div class="overflow-hidden transition-all duration-300 max-h-0" data-collapse-box>
        <div class="p-4 mt-4 bg-light rounded-lg border border-border-color">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
        </div>
        </div>

Collapse Horizontal

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

        
        
        <div>
        <button type="button" class="btn bg-primary text-white rounded-lg" data-collapse-btn>
        Toggle with collapse
        </button>
        <div class="overflow-hidden transition-all duration-300 w-0" data-collapse-box>
        <div class="p-4 mt-4 bg-light rounded-lg border border-border-color w-[350px]">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
        </div>
        </div>

Multiple Targets

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

        
        
        <div>
        <div class="flex flex-wrap items-center gap-2">
        <button class="btn bg-primary text-white rounded-lg" data-collapse-target="#collapseOne">
            Toggle first element
        </button>
        <button class="btn bg-primary text-white rounded-lg" data-collapse-target="#collapseTwo">
            Toggle second element
        </button>
        <button class="btn bg-primary text-white rounded-lg" data-collapse-target="#collapseOne,#collapseTwo">
            Toggle both elements
        </button>
        </div>
        <div class="lg:flex gap-3 block">
        <div id="collapseOne" class="overflow-hidden transition-all duration-300 max-h-0">
            <div class="p-4 mt-4 mb-1 bg-light rounded-lg border border-border-color">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
        </div>
        <div id="collapseTwo" class="overflow-hidden transition-all duration-300 max-h-0">
            <div class="p-4 mt-4 mb-1 bg-light rounded-lg border border-border-color">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
        </div>
        </div>
        </div>