Disclosure

A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.

Open in separate tab

Example

<script lang="ts">
	import { createDisclosure } from 'svelte-headlessui'
	import ChevronUp from '$icons/ChevronUp.svelte'

	const refund = createDisclosure({ label: 'Refund Policy', expanded: true })
	const support = createDisclosure({ label: 'Technical Support', expanded: true })
</script>

<div class="w-full px-4 pt-16">
	<div class="mx-auto w-full max-w-md rounded-2xl bg-white p-2">
		<div>
			<button
				use:refund.button
				class="flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500/75"
			>
				<span>What is your refund policy?</span>
				<ChevronUp
					class="h-5 w-5 text-purple-500 {$refund.expanded ? 'rotate-180 transform' : ''}"
				/>
			</button>
			{#if $refund.expanded}
				<div use:refund.panel class="px-4 pt-4 pb-2 text-sm text-gray-500">
					If you're unhappy with your purchase for any reason, email us within 90 days and we'll
					refund you in full, no questions asked.
				</div>
			{/if}
		</div>
		<div class="mt-2">
			<button
				use:support.button
				class="flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500/75"
			>
				<span>Do you offer technical support?</span>
				<ChevronUp
					class="h-5 w-5 text-purple-500 {$support.expanded ? 'rotate-180 transform' : ''}"
				/>
			</button>
			{#if $support.expanded}
				<div use:support.panel class="px-4 pt-4 pb-2 text-sm text-gray-500">No.</div>
			{/if}
		</div>
	</div>
</div>