§ The show Command

The show command makes a hidden element visible using a configurable strategy. The default strategy is display.

§ Strategies

The following built-in strategies are available:

• display -- toggles display between none and block
• visibility -- toggles visibility between hidden and visible
• opacity -- toggles opacity between 0 and 1

You can also use the style-literal form (e.g. *display).

The display strategy accepts an argument to specify the display type when showing (e.g. show:inline). The default is block.

You can change the default strategy by setting _hyperscript.config.defaultHideShowStrategy, or add new strategies via _hyperscript.config.hideShowStrategies.

§ Filtering with when

The when clause lets you filter which elements are shown in the target. The expression is evaluated for each element -- if true, the element is shown; if false, it's hidden. Use it to refer to the current element.

§ Examples

<div _="on load wait 2s then show">I'll show after a few seconds!</div>

<div _="on load wait 2s then show:inline">
  I'll show inline after a few seconds!
</div>

<div _="on load wait 2s then show with *opacity">
  I'll show after a few seconds with opacity!
</div>

<div _="on click show #anotherDiv">Show Another Div!</div>

<!-- on every keyup show all elements in #quotes that match the inputs value -->
<input type="text" placeholder="Search..."
     _="on keyup
          show <p/> in #quotes when its textContent contains my value">

§ Tailwind CSS Extensions

If you're using Tailwind CSS, you can use their utility classes instead. Set _hyperscript.config.defaultHideShowStrategy to one of:

• twDisplay -- removes class hidden (Display - Tailwind)
• twVisibility -- removes class invisible (Visibility - Tailwind)
• twOpacity -- removes class opacity-0 (Opacity - Tailwind)

<div _="on load wait 2s then show">I'll show after a few seconds!</div>

<!-- Or by specifying the strategy name directly -->
<div _="on load wait 2s then show with *twOpacity">
  I'll show after a few seconds with Tailwind CSS opacity!
</div>

§ Syntax

show [<expression>] [with <hide-show-strategy>[: <argument>]] [when <expression>]