Accordion

<div class="w-full max-w-3xl mb-10">
    <h4 class="text-xl font-bold mb-10">FAQs about private medical insurance</h4>

    <div x-data="{ active: 0 }" class="bg-blue/5 border-y border-black/10 divide-y divide-black/20">
        <div x-data="{
				id: 1,
				get expanded() {
					return this.active === this.id
				},
				set expanded(value) {
					this.active = value ? this.id : null
				},
			}" role="region" class="">
            <div>
                <button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
                    <span>How much will it cost me?</span>
                    <span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
                    <span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
                </button>
            </div>

            <div x-show="expanded" x-collapse>
                <div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
            </div>
        </div>

        <div x-data="{
				id: 2,
				get expanded() {
					return this.active === this.id
				},
				set expanded(value) {
					this.active = value ? this.id : null
				},
			}" role="region" class="">
            <div>
                <button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
                    <span>Can I add cover for my partner or family?</span>
                    <span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
                    <span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
                </button>
            </div>

            <div x-show="expanded" x-collapse>
                <div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
            </div>
        </div>

        <div x-data="{
				id: 3,
				get expanded() {
					return this.active === this.id
				},
				set expanded(value) {
					this.active = value ? this.id : null
				},
			}" role="region" class="">
            <div>
                <button x-on:click="expanded = !expanded" :aria-expanded="expanded" class="flex items-start justify-between w-full text-left font-bold px-5 sm:px-10 py-6">
                    <span>Will I be covered for everything?</span>
                    <span x-show="expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-up fa-lg"></i></span>
                    <span x-show="!expanded" aria-hidden="true" class="ml-4"><i class="fas fa-chevron-down fa-lg"></i></span>
                </button>
            </div>

            <div x-show="expanded" x-collapse>
                <div class="pb-6 px-5 sm:px-10 pr-10 sm:pr-20">You can add other members of your household to your policy. If you do decide to add dependants, their cost of membership will be deducted directly from your monthly salary. It will be listed on your payslip in the same area as your PAYE and national insurance deductions.</div>
            </div>
        </div>
    </div>
</div>