My goal is to create a toggleable list of items using Alpine & x-show. I want the list to be visible when the page loads and allow the user to toggle it as needed. Although the button works correctly and the JavaScript is set up properly, the list itself does not toggle (it only flickers if I include x-transition). Bootstrap is used for icons and classes.
<div x-data="{ selectedDays: ['Tue', 'Wed', 'Fri', 'Sat'], isThisOpen: false }">
<div class="card mt-3">
<div class="card-body">
<button="#" @click="isThisOpen = !isThisOpen">
<div class="d-flex align-items-center" x-bind:style="{'cursor': 'pointer'}">
<i class="bi bi-calendar3 h3 me-3 mb-3"></i>
<p class="sidebar-header mb-3 h5">Training Days</p>
<div class="ms-auto">
<i class=" fas fa-angle-left" x-cloak x-show="isThisOpen"></i>
<i class=" fas fa-angle-left fa-rotate-90" x-show="!isThisOpen"></i>
</div>
</div>
</button>
<div class="btn-group d-grid justify-content-s-center col-6 mx-auto"
role="group" x-show="!isThisOpen" x-transition
>
<template x-for="day in ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']">
<label class="btn btn-primary rounded"
:class="{ 'active': selectedDays.includes(day) }"
>
<input type="checkbox"
x-model="selectedDays"
:value="day"
style="display: none;"
>
<span x-text="day"></span>
</label>
</template>
</div>
</div>
</div>
</div>
I've checked the page, reviewed the documentation, and searched for JS errors. What's frustrating is that I have implemented similar code successfully on the same page before, such as this example:
<li x-data="{ isOpen: false }" class="goal-hierarchy">
<button="#" @click="isOpen = ! isOpen">
<div class="d-flex align-items-center" x-bind:style="{'cursor': 'pointer'}">
<div>
<i class="h3 bi bi-star-fill me-3"></i>
<span class="h5">Goals Priority</span>
</div>
<div class="ms-auto">
<i class=" fas fa-angle-left" x-show="!isOpen"></i>
<i class="fas fa-angle-left fa-rotate-90" x-cloak x-show="isOpen"></i>
</div>
</div>
</button>
<div x-data="{ items: ['Strength', 'Size', 'Power', 'Cardio'],
swapItems: function(indexA, indexB) {
let temp = this.items[indexA];
this.items[indexA] = this.items[indexB];
this.items[indexB] = temp; } }"
x-show="isOpen" x-cloak x-transition>