atril

if.

Adds the element to the DOM when the condition evaluates to truthy, and removes it when the condition evaluates to falsy. Example:

<div let.visible="true">
  <button on.click="visible = !visible">Toggle one!</button>
  <div if.="true">I'm always visible!</div>
  <div if.="visible">I'm conditionally visible!</div>
</div>

Internally, the element is cached while hidden, so adding and removing it is very cheap.

To hide multiple nodes at once, use it on a template tag:

<div let.visible="true">
  <button on.click="visible = !visible">Toggle both!</button>
  <template if.="visible">
    <div>I'm first!</div>
    <div>I'm second!</div>
  </template>
</div>

Note

You can also hide an element without removing it from the DOM by binding to its hidden property:

<div let.visible="true">
  <button on.click="visible = !visible">Toggle one!</button>
  <div bind.hidden="false">I'm always visible!</div>
  <div bind.hidden="!visible">I'm conditionally visible!</div>
</div>