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

41 votes259 views2 answers
Add ... to long text css
CSS
-1 vote195 views2 answers
Animation fade in css
CSS
0 vote190 views1 answer
How make button which is fixed even after i scroll
CSS
0 vote212 views1 answer
Bootstrap put button on one line
CSS
12 votes215 views3 answers
Sticky header css
CSS
0 vote185 views1 answer
Bootstrap create full screen background image
CSS
80 votes218 views6 answers
Css favicon
CSS
0 vote294 views2 answers
Check if post page wp
CSS
0 vote210 views1 answer
CSS background blur or glass effect
CSS
0 vote202 views3 answers
Save line breaks in textarea
CSS