Client-side interactions without writing JavaScript. Toggle, collapse, fade, and animate content.
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>
Animated expand and collapse for FAQ sections and collapsible content.
What is an HTML-first web framework powered by Rust.
No! What handles interactivity on the server side.
Yes. Built with Rust and Tokio for high performance.
<div w-collapse-trigger="#faq-1">
Question
<span class="w-accordion-icon">▼</span>
</div>
<div id="faq-1" class="w-collapse">
<div class="w-accordion-content">
Answer content...
</div>
</div>
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>
Animate numbers counting up for statistics and metrics.
<div id="counter-1" class="w-counter">0</div>
<button
w-counter-trigger
w-counter-target="#counter-1"
w-counter-value="1234">
Animate
</button>
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>