CODEWITHSUNDEEP
javascriptalpine.js
adamwstl
adamwstl

Reputation: 338

Show all x-show divs on button click in Alpine.js

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

Upvotes: 0

Views: 2750

Answers (1)

Dauros
Dauros

Reputation: 10502

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/[email protected]/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>

Upvotes: 1

Related Questions