'Toggle visibility of checkboxes on and off using AlpineJS

I have a checkbox form on a profile page and based on whether they have ticked it I want it to toggle the visibility of further questions on and off.

I'm using something like this:

<div x-data="{ show: false }">
    <input type = "checkbox" @click="show = !show" :aria-expanded="show ? 'true' : 'false'" :class="{ 'active': show }">
    Tick this box
    </input>
    <div x-show="show">Checkboxes go here</div>
</div>

But this loads the visibility as automatically false when the page is loaded. How can I set the default visibility to be based on a variable (the Boolean behind "Tick this box", let's call it tick_box).

Thank you

alpine.js


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions