Alpine extract data to script tag

<div x-data="dropdown">
    <button @click="toggle">Toggle Content</button>
 
    <div x-show="open">
        Content...
    </div>
</div>
 
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,
 
            toggle() {
                this.open = ! this.open
            },
        }))
    })
</script>

Source: alpinejs.dev

Similar codes

8 votes187 views4 answers
Css fill div with background image
CSS
1 vote195 views1 answer
Css round outline
CSS
0 vote281 views1 answer
DIVI Responsive menu breakpoints
CSS
3 votes193 views2 answers
Backdrop filter all properties
CSS
0 vote197 views1 answer
Css color gradient background full height
CSS
0 vote168 views1 answer
How to remove underline from list item in html
CSS
0 vote189 views1 answer
How to package tailwindcss for deployment
CSS
58 votes216 views6 answers
How to remove underline from link
CSS
1 vote181 views1 answer
-ms css
CSS
3 votes195 views1 answer
Select text-align center
CSS