DEV Community

Félix Moreno
Félix Moreno

Posted on

2- Alpine.js: Mostrar u ocultar contenido

Alpine.js es una librería JavaScript liviana y poderosa que permite agregar interactividad a nuestras páginas web de manera simple y efectiva.
En este artículo, vamos a utilizar Alpine.js para mostrar y ocultar elementos.

Ejemplo:

A continuación veremos un ejemplo que demuestra cómo usar Alpine.js para mostrar y ocultar un elemento:


<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div x-data="{ isOpen: true }">
        <button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button>
        <h1 x-show="isOpen">Página de Inicio</h1>
    </div>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Explicación del código:

x-data:
La directiva x-data inicializa un objeto Reactivo en Alpine.js. En este caso, declaramos isOpen con un valor inicial de true.

<div x-data="{ isOpen: true }">
Enter fullscreen mode Exit fullscreen mode

Botón con x-on:click:
La directiva x-on:click escucha el evento de clic en el botón y alterna el valor de isOpen entre true y false.

<button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button>
Enter fullscreen mode Exit fullscreen mode

Elemento con x-show:
La directiva x-show controla la visión del elemento según el valor de isOpen. Si es true, el elemento se muestra; si es false, el elemento se oculta.

<h1 x-show="isOpen">Página de Inicio</h1>
Enter fullscreen mode Exit fullscreen mode

Resultado:

Al cargar la página en el navegador, debe verse lo siguiente:

Image description

Al dar clic en el botón, se dejará de ver el elemento con el texto Página de Inicio, así:

Image description

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more