Toggle · Panel

Basic Usage

Utilize the data-mv-toggle="#my_toggle_element" attribute with an ID selector and data-mv-toggle-class="hidden" ttribute to theme the referenced element's visibilty.

Toggling content is a popular technique in web development that enhances user interaction and engagement.

<div class="space-y-3">
  <button class="mv-btn" data-mv-toggle="#toggle_element1" data-mv-toggle-class="hidden">
    Toggle Element
  </button>
  <div id="toggle_element1" class="max-w-[325px] p-4 rounded-lg border border-border text-sm">
    Toggling content is a popular technique in web development that enhances
    user interaction and engagement.
  </div>
</div>

Hidden

Set the referenced element to be hidden by default by applying the hidden class

<div class="space-y-2.5">
  <button class="mv-btn" data-mv-toggle="#toggle_element2" data-mv-toggle-class="hidden">
    Toggle Element
  </button>
  <div id="toggle_element2" class="hidden max-w-[325px] p-4 rounded-lg border border-border text-sm">
    Toggling content is a popular technique in web development that enhances
    user interaction and engagement.
  </div>
</div>

Appearance

Utilize data-mv-toggle-class="border border-red-600 bg-green-700" attribute with Tailwind classes to change the referenced element's appearance.

Toggling content is a popular technique in web development that enhances user interaction and engagement.

<div class="space-y-2.5">
  <button class="mv-btn" data-mv-toggle="#toggle_element3" data-mv-toggle-class="border-red-600">
    Theme Element
  </button>
  <div id="toggle_element3" class="text-sm max-w-[325px] p-4 rounded-lg border border-border">
    Toggling content is a popular technique in web development that enhances
    user interaction and engagement.
  </div>
</div>