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 vote213 views1 answer
Display elements in column css
CSS
0 vote194 views1 answer
Shorthand notation of declaring top, right, bottom, left position
CSS
1 vote195 views1 answer
Background color for whole page css
CSS
0 vote172 views1 answer
How to use linear-gradient together with background image in bootstrap
CSS Bootstrap
50 votes184 views6 answers
Backgroud color css
CSS
48 votes206 views2 answers
Css clear
CSS
66 votes206 views6 answers
Margin css
CSS
0 vote213 views1 answer
Grid style form
CSS
0 vote202 views1 answer
WSGI: Truncated or oversized response headers received from daemon process
CSS
85 votes192 views6 answers
Red color hex
CSS