Alpine JS Add Remove Class Example
May 13, 2021 . Admin
Hi Dev,
Today, I will learn you how to use add and remove class in Alpine JS. We will show example of hide and show on click event in Alpine JS, you can easliy use in your laravel project.
In this example bellow toggle list categories and we apply attribute :class
you can also use this example in your php and laravel alpine JS project.
I will give you simple toggle event example using alpine js you can see on below example code. you can simply copy and check that.
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script> <style type="text/css"> body{ padding: 50px; background-color: #f7fcff; } .open-class{ display: block; } .hidden-class{ display: none; } </style> </head> <body> <div x-data="{ open: false }"> <h1>Alpine js Add Remove Class Example - MyWebtuts.com</h1> <button @click="open = !open">Toggle List Categories</button> <ul :class="{'open-class' : open, 'hidden-class' : !open}"> <li>PHP</li> <li>Laravel</li> <li>Vue</li> <li>React</li> </ul> </div> </body> </html>
I Hope It Will Help You..