Show / Hide

Toggle visibility of any element with a simple attribute.

This content can be shown or hidden by clicking the button.

<button w-toggle="#toggle-demo">Toggle</button>

<div id="toggle-demo">
  Content to show/hide
</div>

Expand / Collapse (Accordion)

Animated expand and collapse for FAQ sections and collapsible content.

What is the What Framework? ▼

What is an HTML-first web framework powered by Rust.

Do I need to know JavaScript? ▼

No! What handles interactivity on the server side.

Is it fast? ▼

Yes. Built with Rust and Tokio for high performance.

<div w-collapse-trigger="#faq-1">
  Question
  <span class="w-accordion-icon">&#9660;</span>
</div>
<div id="faq-1" class="w-collapse">
  <div class="w-accordion-content">
    Answer content...
  </div>
</div>

Fade In / Out

Smooth fade transitions for showing and hiding content.

This content fades in and out smoothly.

<button w-fade-trigger="#fade-demo">Fade</button>

<div id="fade-demo" class="w-fade w-fade-in">
  Content that fades
</div>

Animated Counter

Animate numbers counting up for statistics and metrics.

0

Users

0

Downloads

0

Stars

<div id="counter-1" class="w-counter">0</div>

<button
  w-counter-trigger
  w-counter-target="#counter-1"
  w-counter-value="1234">
  Animate
</button>

Dropdown Menus

Click-triggered dropdown menus using the native <details> element. No JavaScript required.

Using <what-dropdown>

<details class="dropdown">
  <summary class="btn btn-primary">Options</summary>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Edit</a>
    <div class="dropdown-divider"></div>
    <div class="dropdown-header">Section</div>
    <a href="#" class="dropdown-item">More</a>
  </div>
</details>

<!-- Right-aligned -->
<details class="dropdown dropdown-right">...</details>

<!-- Component -->
<what-dropdown label="Menu" style="primary">
  <a href="#" class="dropdown-item">Item</a>
</what-dropdown>

Tooltips

CSS-only hover tooltips using the data-tooltip attribute. No JavaScript needed.

On Other Elements

Notifications Settings Link Hover me

Using <what-tooltip>

<!-- Add tooltip with position -->
<button
  data-tooltip="Tooltip text"
  data-tooltip-position="top">
  Hover me
</button>

<!-- Positions: top, bottom, left, right -->

<!-- Component -->
<what-tooltip text="Tooltip text" position="top">
  <button class="btn btn-primary">Hover</button>
</what-tooltip>

Interaction Attributes

Reference for all interaction-related attributes.

Attribute	Description
`w-toggle`	Toggle visibility
`w-collapse-trigger`	Expand/collapse
`w-fade-trigger`	Fade in/out
`w-counter-trigger`	Start counter
`w-counter-target`	Counter element
`w-counter-value`	Target number
`data-tooltip`	CSS-only tooltip text
`data-tooltip-position`	Tooltip position (top, bottom, left, right)
`<details class="dropdown">`	Click-triggered dropdown menu

<!-- Toggle visibility -->
<button w-toggle="#element">Toggle</button>

<!-- Collapse/expand -->
<div w-collapse-trigger="#content">Click</div>

<!-- Fade effect -->
<button w-fade-trigger="#element">Fade</button>

<!-- Counter animation -->
<button w-counter-trigger
  w-counter-target="#num"
  w-counter-value="100">Count</button>

<!-- Tooltip -->
<span data-tooltip="Help text"
  data-tooltip-position="top">Hover</span>

<!-- Dropdown -->
<details class="dropdown">
  <summary class="btn">Menu</summary>
  <div class="dropdown-menu">...</div>
</details>

Interactions