Interactions - What Framework?

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>

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

<!-- 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>