Toggle visibillity of a list in Svelte

I am trying to do the most basic thing in Svelte but I keep failing. I want the button element to trigger the visibillity of the ul-element with classname “this-one”. I am stuck in the “vanilla js”-approach and can not wrap my head around how to achieve this the svelte-way. Any pointers?

        <ul>
            <li>
                <ul>
                    {#each item.children as child (child.id)}
                        <li>
                            <div>
                                <a href={child.route.path} on:click={() => dispatch('click')}>
                                    <span>{child.name}</span>
                                </a>
                                {#if child.children?.length > 0}
                                    <button>
                                        <i class="chevron-down"></i>
                                    </button>
                                {/if}
                            </div>
                            {#if child.children?.length > 0}
                                <ul class="this-one">
                                    {#each child.children as grandChild}
                                        <li>
                                            <a href={grandChild.route.path} on:click={() => dispatch('click')}>
                                                {grandChild.name}
                                            </a>
                                        </li>
                                    {/each}
                                </ul>
                            {/if}
                        </li>
                    {/each}
                </ul>
            </li>
        </ul>