Toggling Visibility

Vuev-show

<script setup lang="ts">
import { ref } from 'vue'

const isVisible = ref(false)

function togglePanel() {
  isVisible.value = !isVisible.value
}
</script>

<template>
  <button @click="togglePanel">
    Toggle panel
  </button>

  <p v-show="isVisible">Extra details</p>
</template>

It uses the v-show directive to toggle visibility without removing the element from the DOM.

Vue docs

Reacthidden

import { useState } from 'react'

function TogglePanel() {
  const [isVisible, setIsVisible] = useState(false)

  function togglePanel() {
    setIsVisible(!isVisible)
  }

  return (
    <>
      <button onClick={togglePanel}>
        Toggle panel
      </button>

      <p hidden={!isVisible}>Extra details</p>
    </>
  )
}

The framework does not have a specific API for this case, so it uses the native HTML hidden attribute.

Angular[hidden]

import { Component, signal } from '@angular/core'

@Component({
  selector: 'app-toggle-panel',
  standalone: true,
  template: `
    <button (click)="togglePanel()">
      Toggle panel
    </button>

    <p [hidden]="!isVisible()">Extra details</p>
  `,
})
export class TogglePanelComponent {
  isVisible = signal(false)

  togglePanel() {
    this.isVisible.update((value) => !value)
  }
}

It uses a property binding on hidden to toggle visibility without removing the rendered element.

Angular docs