Collapse

Basic Usage

Click on the toggle button to expand the additional information in the collapsed content.

<div class="space-y-2.5">
  <button class="mv-btn" data-mv-collapse="#collapse_content" aria-expanded="false" aria-controls="collapse_content" id="collapse_toggle">
    Collapse<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-collapse-active:hidden size-4" aria-hidden="true">
      <path d="m6 9 6 6 6-6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up mv-collapse-active:block hidden size-4" aria-hidden="true">
      <path d="m18 15-6-6-6 6"></path>
    </svg>
  </button>
  <div class="transition-[height] duration-300 hidden" id="collapse_content" aria-labelledby="collapse_toggle">
    Centralize your team information with our management tools. Access detailed
    instructions, expert advice, and technical documentation to maintain an
    up-to-date team directory
  </div>
</div>

Show/Hide

Click on the toggle button to expand the additional information with show and hide indicator.

Centralize your team information with our management tools. Access detailed instructions, expert advice, and technical documentation to maintain an up-to-date team directory.

<div class="w-full max-w-[75%]">
  <div class="mb-2.5">
    Centralize your team information with our management tools. Access detailed
    instructions, expert advice, and technical documentation to maintain an
    up-to-date team directory.
  </div>
  <div class="mb-2.5 transition-[height] duration-300 hidden" id="collapse_content2" aria-labelledby="collapse_toggle2">
    This is a collapse content hidden by default and show on the show more link
    click.
  </div>
  <button type="button" class="mv-link mv-link-underline" data-mv-collapse="#collapse_content2" aria-expanded="false" aria-controls="collapse_content2" id="collapse_toggle2">
    <span class="inline-flex items-center gap-1 mv-collapse-active:hidden">Show more<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-collapse-active:hidden size-4" aria-hidden="true">
        <path d="m6 9 6 6 6-6"></path></svg></span><span class="hidden items-center gap-1 mv-collapse-active:inline-flex">Hide<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up mv-collapse-active:block hidden size-4" aria-hidden="true">
        <path d="m18 15-6-6-6 6"></path></svg></span>
  </button>
</div>