Alternar Visibilidad

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>

Usa la directiva v-show para alternar la visibilidad sin sacar el elemento del 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>
    </>
  )
}

El framework no tiene una API específica para este caso, así que se usa el atributo HTML nativo hidden.

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)
  }
}

Usa un property binding sobre hidden para alternar la visibilidad sin eliminar el elemento renderizado.

Angular docs