tailwind-css - Alpine トグルを使用してコンテンツを切り替えるには?

Question

私は tailwind と AlpineJS を使用しています。以下のトグル スイッチを設計しましたが、異なるコンテンツを切り替える方法がわかりません。

どんな助けでも大歓迎です。

<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>