Enjoy the DOM.Write Alpine JS.
Alpine JS allows you to write DOM manipulation all in your HTML, Liquid, Blade etc. Here's a collection of snippets that you can copy and paste into your project.
Accordion with Plugin
Accordion with Plugin
Create accordion functionality with the x-collapse Alpine JS plugin to handle the smooth transition.
Accordion
Accordion
Create accordion functionality with smooth a transition.
Alert Close Auto with Life
Alert Close Auto with Life
Alert that is automatically dismissed after 5 seconds with a bar that shows how long is left.
Alert Close Auto
Alert Close Auto
Alert that is automatically dismissed after 5 seconds.
Alert Close
Alert Close
Alert that can be dismissed with a close button.
Datepicker Clear
Datepicker Clear
Datepicker input using Flatpickr with a button that clears the selected date.
Datepicker
Datepicker
Datepicker input using Flatpickr.
Dropdown on Hover
Dropdown on Hover
Dropdown menu that is displayed when the link/button is on hover.
Dropdown
Dropdown
Dropdown menu that is displayed when the link/button is clicked.
Format Currency
Format Currency
Format number into currency with alpinejs-money plugin. Also works with Shopify config.
Input Card Expiry Date
Input Card Expiry Date
Mask the value of the input to be formatted like a card expiry date with the x-mask Alpine JS plugin.
Input Card Number Dynamic
Input Card Number Dynamic
Mask the value of the input to be formatted like a card number with the x-mask Alpine JS plugin. Masking based on card type.
Input Card Number
Input Card Number
Mask the value of the input to be formatted like a card number with the x-mask Alpine JS plugin.
Input Lowercase
Input Lowercase
Force an input value to be lowercase.
Input Positive Number
Input Positive Number
Force an input number value to never be less than zero.
Input Quantity
Input Quantity
Increase and decrease the value of an input with a plus and minus button. Perfect for ecommerce websites.
Input Slug
Input Slug
Transform an input value into a hyphenated string with alpinejs-slug plugin.
Input Uppercase
Input Uppercase
Force an input value to be uppercase.
Laravel Pass Alpine JS Data
Laravel Pass Alpine JS Data
Pass Alpine JS data to Laravel Blade components.
Modal
Modal
Animate a modal when a link/button is clicked. Can be dismissed when clicking away.
Multistep Form
Multistep Form
Multistep form that allows the user to go back to previous steps.
Slide Out
Slide Out
Animate an off canvas element when a link/button is clicked. Can be dismissed when clicking away.
Tabs
Tabs
Show and hide tab content. On load the match the tab content ID to the URL hash and display.
Update Class When Sticky
Update Class When Sticky
Add classes to elements whan a target element is sticky in the DOM with alpinejs-sticky plugin.