Alpine JS Add Remove Class Example


Share:
Published By: Admin, Published On: May 13, 2021, Category: Alpine JS

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. Here, I will give you full example for simply add and remove class in alpine JS as bellow.

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..

Share: