Question

0

108

Vistas

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

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-06-25T20:06:53.316Z

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>