Alpine JS x-on click event example

In this tutorial we will see alpine js x-on or @click event example. We can use the x-on to listen to DOM events and run some JavaScript when they’re triggered.


Example 1

x-on click event syntax.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Alpine JS x-on click event example</title>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div x-data>
      <button x-on:click="alert('Hello World!')">Click Me</button>
    </div>
  </body>
</html>


Shorthand syntax

<div x-data>
  <button @click="alert('Hello World!')">Click Me</button>
</div>


Example 2

For increase and decrease value using click event and x-text.

<div x-data="{ count: 0 }">
  <button x-on:click="count++">Increment</button>
  <button x-on:click="count--">Decrement</button>
  <span x-text="count"></span>
</div>


Example 3

Create toggle button with alpine js using click events

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Toggle button with Alpine js using @click events</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script
      defer
      src="https://unpkg.com/alpinejs@3.3.2/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div class="flex justify-center mt-8" x-data="{ toggle: '0' }">
      <div
        class="relative w-12 h-6 transition duration-200 ease-linear rounded"
        :class="[toggle === '1' ? 'bg-green-400' : 'bg-gray-400']"
      >
        <label
          for="toggle"
          class="absolute left-0 w-6 h-6 mb-2 transition duration-100 ease-linear transform bg-white border-2 rounded cursor-pointer "
          :class="[toggle === '1' ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400']"
        ></label>
        <input
          type="checkbox"
          id="toggle"
          name="toggle"
          class="w-full h-full appearance-none focus:outline-none"
          @click="toggle === '0' ? toggle = '1' : toggle = '0'"
        />
      </div>
    </div>
  </body>
</html>


Example 4

Alpine js hide element and show element using @click event and x-show.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Alpine JS x-on click event example</title>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div x-data="{ open: false }">
      <button
        @click="open = !open"
        x-text="open==true  ? 'hide' : 'show'"
      ></button>
      <ul x-show="open">
        <li>Tailwind CSS</li>
        <li>PHP</li>
        <li>Laravel</li>
      </ul>
    </div>
  </body>
</html>

You can use create drop down

<div x-data="{ open: false }">
      <button
        @click="open = !open"
      >Dropdown</button>
      <ul x-show="open">
        <li>Tailwind CSS</li>
        <li>PHP</li>
        <li>Laravel</li>
      </ul>
    </div>


For more use Alpine js click event

Create a Modal Alpine js With Tailwind CSS

Create Accordion (FAQ) Alpine js With Tailwind CSS

Create Simple Responsive Navbar in Tailwind CSS with Alpine js

How to Set and Reset Value of Textarea in Alpine js

Alpine js hide show Password with Tailwind CSS Example


Tags: