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

Question

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

Dauros · Accepted Answer · 2022-06-02 17:00:36Z

1

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>

edited Jun 2, 2022 at 17:00

answered Jun 2, 2022 at 16:18

Dauros

10.7k2 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

adamwstl Over a year ago

Thank you! Would you mind showing me how to make the "Show All" button a show / hide toggle?

Dauros Over a year ago

Sure! I added a defaultColor variable that will be the default state after toggling.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related