data-show

Show or hide the element with display: none. The element stays in the DOM, so its state and its directives survive being hidden.

Syntax

data-show="$open"
data-show="$items.length > 0"

part
key	forbidden
value	required: truthy shows

Toggle

basic

Now you see me.

<div data-signals="{ open: false }">
  <button data-on:click="$open = !$open">Toggle</button>
  <p data-show="$open">Now you see me.</p>
</div>

The inline display value is kept

A style="display:flex" element comes back as flex, not block.

flex survives a hide

display after showing again:

<div data-signals="{ on: true }">
  <button data-on:click="$on = !$on">toggle</button>
  <div data-show="$on" style="display:flex;gap:.5rem;margin-top:.5rem"><div class="box" style="flex:1;height:1rem"></div><div class="box" style="flex:1;height:1rem"></div></div>
  <p class="muted">display after showing again: <code data-text="$on ? el.parentElement.previousElementSibling.style.display : 'none'"></code></p>
</div>

Avoid the flash before mount

Content that starts hidden should also carry style="display:none", so it does not appear for a frame before sigmx runs.

start hidden

<div data-signals="{ details: false }">
  <button data-on:click="$details = !$details" data-text="$details ? 'less' : 'more'">more</button>
  <p data-show="$details" style="display:none">Rendered hidden by the server, revealed by the signal.</p>
</div>

Notes

For an animated show and hide use data-transition (fade) or data-collapse (height); both remember the inline display value the same way.

Register

import { show } from 'sigmx/plugins'

Registering show adds 135 bytes brotli (156 gzip, 343 minified) on top of the core. See bundle sizes.