How to use Alpine toggle to switch content?

Question

I'm using tailwind and AlpineJS. I have designed the bellow toggle switch but I can't seem to work out how to toggle between different content.

Any help will be greatly appreciated.

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
            <div class="flex justify-center items-center mt-8" x-data="{toggle: '0'}">              
                <span class=" block mr-3 text-xs">Residential</span>
                 <div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
                     :class="[toggle === '1' ? 'bg-black' : 'bg-black']">
                  <label for="toggle"
                         class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
                         :class="[toggle === '1' ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']"></label>
                  <input type="checkbox" id="toggle" name="toggle"
                         class="appearance-none w-full h-full active:outline-none focus:outline-none"
                         @click="toggle === '0' ? toggle = '1' : toggle = '0'"/>
                </div> 
                <span class=" block ml-3 text-xs">Business</span>
            </div>

            <div id="toggleOff">This content shows on page load and toggle is off, otherwise it is hidden</div>
            <div id="toggleOn">This content shows when the toggle is clicked, otherwise it is hidden</div>

score 1 · Accepted Answer · answered Aug 24 '21 at 15:24

According to alpine.js documentation, you could use built-in directives to show/hide elements and pass value of input.

So basically, the x-bind directive (more here) allows you to bind value of input to variable. You can add this to your checkbox and as a variable set toggle. There is also the x-show directive (more here), that simply sets display property to none when the given to directive expression is true.

The problem is the x-data scope. If you want to use the variable declared in this directive, the element must be nested in the element with x-data directive.

So overall, your code could look like that:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet" />
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{toggle: false}">

    <div class="flex justify-center items-center mt-8">
        <span class=" block mr-3 text-xs">Residential</span>

        <div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
             :class="[toggle ? 'bg-black' : 'bg-black']">

            <label for="toggle"
                   class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
                   :class="[toggle ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']">
            </label>

            <input type="checkbox"
                   id="toggle"
                   name="toggle"
                   x-model="toggle"
                   class="appearance-none w-full h-full active:outline-none focus:outline-none" />
        </div>

        <span class=" block ml-3 text-xs">Business</span>
    </div>

    <div id="toggleOff"
         x-show="!toggle">
        This content shows on page load and toggle is off, otherwise it is hidden
    </div>
    
    <div id="toggleOn"
         x-show="toggle">
        This content shows when the toggle is clicked, otherwise it is hidden
    </div>

</div>

How to use Alpine toggle to switch content?

1 Answers1