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

0 vote288 views2 answers
How to change svg image color on hover using css
CSS
1 vote263 views1 answer
Javascript read me text
CSS
4 votes272 views2 answers
Background image with color overlay gradient css
CSS
0 vote307 views1 answer
Css mask cut diagonal
CSS
-2 votes312 views1 answer
Reduce image size on mobile view css
CSS
0 vote289 views1 answer
Grid place between
CSS
0 vote274 views1 answer
Css a little transparent
CSS
5 votes232 views1 answer
Show scrollbar only when scrolling
CSS
39 votes291 views6 answers
Css pointer-events
CSS
0 vote302 views1 answer
Css to exclude last row table
CSS