This seems simple but can't quite figure it out. I have three Divs that toggle based on the selection, but I'm trying to also have a "view all" button that toggles to show all three divs. I also am hoping to have the first Div show on load.
<div x-data="{ color: '' }">
<button x-on:click="color='Yellow', color='Red', color='Orange'">Show All</button>
<select x-model="color">
<option>Red</option>
<option>Orange</option>
<option>Yellow</option>
</select>
<div x-show="color === 'Red'">Show on Load</div>
<div x-show="color === 'Orange'">Orange</div>
<div x-show="color === 'Yellow'">Yellow</div>
</div>
Link to JSbin
Introduce a dedicated 'All' state to show all items. The default value of color can be given at x-data.
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ color: 'Red', defaultColor: 'Red' }">
<button x-on:click="color = (color === 'All') ? defaultColor : 'All'">Show All</button>
<select x-model="color">
<option>Red</option>
<option>Orange</option>
<option>Yellow</option>
</select>
<div x-show="color === 'Red' || color === 'All'">Show on Load</div>
<div x-show="color === 'Orange' || color === 'All'">Orange</div>
<div x-show="color === 'Yellow' || color === 'All'">Yellow</div>
</div>