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

7 votes188 views2 answers
Fira code
CSS
0 vote199 views2 answers
How to change the select arrow in css
CSS
0 vote258 views1 answer
Profile page html css template
CSS
3 votes234 views1 answer
Learn css animation
CSS
7 votes227 views3 answers
Make text unselectable css
CSS
2 votes190 views1 answer
Css preprocessor
CSS
0 vote201 views1 answer
ForEach In a forEach method, we pass each food type within that iteration into the callback. A for loop needs you to access the array using a temporary i variable.
CSS
0 vote181 views2 answers
Css gradient rgba to hex
CSS
2 votes283 views1 answer
Changong text color css
CSS
0 vote199 views1 answer
Decrease space between paragraphs html
CSS