Im a newbie to JS and Phoenix (PETAL stack in general).Problem raised when I want to implement hidden content with Alpine JS. Here`s some code:

<div x-data="{ open: false }">
    <button @click=" open = ! open ">toggle</button>
    <div x-show="open" class="text-center" x-cloak>
       <p>content</p>
    </div>
</div>

So my idea is to show the content only when a user clicks the show button. But when I load the page the content is visible and I need to press the button twice to hide it. I tried to use x-cloak and x-if. Maybe Alpine does not work right for some reason in my project?

P.S. I added in root layout style, but still can`t get the right output

[x-cloak] { display: none !important; }