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 votes166 views2 answers
Add ... to long text css
CSS
1 vote137 views2 answers
How to center a position fixed element horizontally
CSS
12 votes139 views2 answers
Grid template columns
CSS
1 vote139 views1 answer
Css animation stop
CSS
1 vote144 views2 answers
Border shorthand CSS
CSS
27 votes141 views1 answer
Css how to create gradients on text outline
CSS
2 votes94 views1 answer
How to disable div onclick in javascript
CSS
18 votes137 views4 answers
Css rotate animation
CSS
0 vote143 views1 answer
Test typescript
CSS
0 vote159 views1 answer
Is there a min-left css attribute
CSS