<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Collapse')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Base UI', 'title' => 'Collapse')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Base UI', 'title' => 'Collapse')) ?>

                    <div class="container">
<div class="grid xl:grid-cols-2 gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Collapse</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="mb-4 flex flex-wrap items-center gap-2">
<button class="hs-collapse-toggle btn bg-primary hover:bg-primary-hover text-white open" data-hs-collapse="#collapseExample">Collapse Button</button>
</div>
<div aria-labelledby="collapseLink" class="hs-collapse open w-full overflow-hidden shadow transition-[height] duration-300" id="collapseExample">
<div class="card border border-dashed border-light card-body">
                                            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>
<div class="card">
<div class="card-header">
<h4 class="card-title">Show/Hide Collapse</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p>This admin UI kit provides a collection of ready-to-use dashboard and interface components built with the utility-first Tailwind CSS framework.</p>
<div aria-labelledby="show-hide-collapse" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" id="show-hide-collapse-heading">
<p class="mt-2">
                                            These components are designed specifically for admin panels, dashboards, and internal tools. The collapsible content supports smooth transitions and can be used to organize advanced settings or additional information without cluttering
                                            the interface.
                                        </p>
</div>
<p class="mt-2">
<button aria-controls="show-hide-collapse-heading" aria-expanded="false" class="hs-collapse-toggle inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-primary decoration-2 hover:primary-hover hover:underline focus:outline-hidden focus:underline focus:primary-hover" data-hs-collapse="#show-hide-collapse-heading" id="show-hide-collapse" type="button">
<span class="hs-collapse-open:hidden">Read more</span>
<span class="hs-collapse-open:block hidden">Read less</span>
<i class="iconify tabler--chevron-up hs-collapse-open:rotate-180 shrink-0 text-base"></i>
</button>
</p>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>