如何在TailwindCSS和Alpine.js中构建没有重复选项卡内容的响应式手风琴选项卡？

Question

我试图在TailwindCSS &Alpine.js，类似于A11y Accordion选项卡。

在移动视图中，组件应该表现得像Accordion。在桌面上，它应该表现得像tab。

但是如何避免页面中重复相同的内容呢?理想情况下，选项卡/手风琴中的内容应该只在页面中出现一次，这样HTML就不会臃肿。

这是一个codepen，这是我目前所拥有的:

<div class="m-1.5" x-data="{ tab : 'tab-a' }">
<div class="sm:flex">
<a x-on:click="tab = 'tab-a'">
<div :class="tab === 'tab-a' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="sm:rounded-t-sm sm:mr-2 cursor-pointer bg-gray-200 font-bold p-1.5 pb-3 pt-3 text-gray-700 text-xs my-px sm:mb-0 w-full sm:w-max">
Tab A
</div>
</a>
<div class="sm:hidden relative overflow-hidden max-h-0 duration-300" x-ref="containerA" x-bind:style="tab === 'tab-a' ? 'max-height: ' + $refs.containerA.scrollHeight + 'px' : ''">
Tab A content
</div>
<a x-on:click="tab = 'tab-b'">
<div :class="tab === 'tab-b' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="sm:rounded-t-sm sm:mr-2 cursor-pointer bg-gray-200 font-bold p-1.5 pb-3 pt-3 text-gray-700 text-xs my-px sm:mb-0 w-full sm:w-max">
Tab B
</div>
</a>
<div class="sm:hidden relative overflow-hidden max-h-0 duration-300" x-ref="containerB" x-bind:style="tab === 'tab-b' ? 'max-height: ' + $refs.containerB.scrollHeight + 'px' : ''">
Tab B content
</div>
<a x-on:click="tab = 'tab-c'">
<div :class="tab === 'tab-c' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="sm:rounded-t-sm sm:mr-2 cursor-pointer bg-gray-200 font-bold p-1.5 pb-3 pt-3 text-gray-700 text-xs my-px sm:mb-0 w-full sm:w-max">
Tab C
</div>
</a>
<div class="sm:hidden relative overflow-hidden max-h-0 duration-300" x-ref="containerC" x-bind:style="tab === 'tab-c' ? 'max-height: ' + $refs.containerC.scrollHeight + 'px' : ''">
Tab C content
</div>
</div>
<div class="hidden sm:block">
<div x-show="tab === 'tab-a'">
Tab A content should not be duplicated here
</div>
<div x-show="tab === 'tab-b'">
Tab B content should not be duplicated here
</div>
<div x-show="tab === 'tab-c'">
Tab C content should not be duplicated here
</div>
</div>
</div>

Answer 1

这里的答案是复制标签标题而不是内容:

<div class="m-1.5" x-data="{ tab : 'tab-a' }">
<div class="flex">
<a x-on:click="tab = 'tab-a'">
<h3 :class="tab === 'tab-a' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="hidden sm:block cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs w-16 border-2 border-b-0">
Tab A
</h3>
</a>
<a x-on:click="tab = 'tab-b'">
<h3 :class="tab === 'tab-b' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="hidden sm:block cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs w-16 border-2 border-b-0">
Tab B
</h3>
</a>
<a x-on:click="tab = 'tab-c'">
<h3 :class="tab === 'tab-c' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="hidden sm:block cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs w-16 border-2 border-b-0">
Tab C
</h3>
</a>
</div>
<a x-on:click="tab = 'tab-a'">
<h3 class="sm:hidden cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs my-px sm:mb-0">
Tab A
</h3>
</a>
<div class="overflow-hidden max-h-0 duration-300 sm:transition-none" x-ref="containerA" x-bind:style="tab === 'tab-a' ? 'max-height: ' + $refs.containerA.scrollHeight + 'px' : ''">
Tab A content
</div>
<a x-on:click="tab = 'tab-b'">
<h3 class="sm:hidden cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs my-px sm:mb-0">
Tab B
</h3>
</a>
<div class="overflow-hidden max-h-0 duration-300 sm:transition-none" x-ref="containerB" x-bind:style="tab === 'tab-b' ? 'max-height: ' + $refs.containerB.scrollHeight + 'px' : ''">
Tab B content
</div>
<a x-on:click="tab = 'tab-c'">
<h3 class="sm:hidden cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs my-px sm:mb-0">
Tab C
</h3>
</a>
<div class="overflow-hidden max-h-0 duration-300 sm:transition-none" x-ref="containerC" x-bind:style="tab === 'tab-c' ? 'max-height: ' + $refs.containerC.scrollHeight + 'px' : ''">
Tab C content
</div>
</div>