BUNN Logo Horizontal

Accordions

Default Accordions

Accordion Title
Accordion Title
<div class="accordion js-accordion">
	<div class="accordion__item js-accordion-item group">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow group-active:text-brand-primary">Accordion Title</div>
			<div class="js-accordion-icon p-2 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-4">
			Accordion Content
		</div>
	</div>
	<div class="accordion__item js-accordion-item group">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow group-active:text-brand-primary">Accordion Title</div>
			<div class="js-accordion-icon p-2 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-4">
			Accordion Content
		</div>
	</div>
</div>

Nested Accordions

Accordion Title
Accordion Title
<div class="accordion js-accordion">
	<div class="accordion__item js-accordion-item">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow">Accordion Title</div>
			<div class="js-accordion-icon p-2 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-4">
			<div>Accordion Content</div>
			
			<div class="pt-4 pl-8">
				<div class="accordion js-accordion">
					<div class="accordion__item js-accordion-item">
						<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
							<div class="js-accordion-icon p-2 text-gray-400" data-inactive-icon="fa-plus" data-active-icon="fa-minus"><i class="fal fa-plus"></i></div>
							<div class="flex-grow">Accordion Title</div>
						</div>
						<div class="accordion__content js-accordion-content hidden py-4">
							Accordion Content
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="accordion__item js-accordion-item">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow">Accordion Title</div>
			<div class="js-accordion-icon p-2 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-4">
			<div>Accordion Content</div>
			
			<div class="pt-4 pl-8">
				<div class="accordion js-accordion">
					<div class="accordion__item js-accordion-item">
						<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
							<div class="js-accordion-icon p-2 text-gray-400" data-inactive-icon="fa-plus" data-active-icon="fa-minus"><i class="fal fa-plus"></i></div>
							<div class="flex-grow">Accordion Title</div>
						</div>
						<div class="accordion__content js-accordion-content hidden py-4">
							Accordion Content
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Icons on the left, and different icons

Accordion Title
Accordion Title
<div class="accordion js-accordion">
	<div class="accordion__item js-accordion-item">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="js-accordion-icon p-2 -ml-2 text-gray-400" data-inactive-icon="fa-plus" data-active-icon="fa-minus"><i class="fal fa-plus"></i></div>
			<div class="flex-grow">Accordion Title</div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-4">
			Accordion Content
		</div>
	</div>
	<div class="accordion__item js-accordion-item">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="js-accordion-icon p-2 -ml-2 text-gray-400" data-inactive-icon="fa-plus" data-active-icon="fa-minus"><i class="fal fa-plus"></i></div>
			<div class="flex-grow">Accordion Title</div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-4">
			Accordion Content
		</div>
	</div>
</div>

Accordions with dividers

Example: adding border utility classes to each accordion__item

Accordion Title
Accordion Title
<div class="accordion js-accordion">
	<div class="accordion__item js-accordion-item border-b border-gray-300">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow">Accordion Title</div>
			<div class="js-accordion-icon p-4 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-6">
			Accordion Content
		</div>
	</div>
	<div class="accordion__item js-accordion-item border-b border-gray-300">
		<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow">Accordion Title</div>
			<div class="js-accordion-icon p-4 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-6">
			Accordion Content
		</div>
	</div>
</div>

Accordions with slightly more robust selected styles

This one is more opinionated and needs a class of accordion--variantA

Accordion Title
Accordion Title
<div class="accordion accordion--variantA js-accordion">
	<div class="accordion__item js-accordion-item">
		<div class="accordion__title js-accordion-title text-gray-700 font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow">Accordion Title</div>
			<div class="js-accordion-icon p-4 -mr-4 text-lg-2 text-gray-500" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-6 pl-4">
			Accordion Content
		</div>
	</div>
	<div class="accordion__item js-accordion-item">
		<div class="accordion__title js-accordion-title text-gray-700 font-sans-demi cursor-pointer font-sans-medium flex items-center">
			<div class="flex-grow">Accordion Title</div>
			<div class="js-accordion-icon p-4 -mr-4 text-lg-2 text-gray-500" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
		</div>
		<div class="accordion__content js-accordion-content hidden py-6 pl-4">
			Accordion Content
		</div>
	</div>
</div>

Accordions with images

Some accordions are paired with a related image. These require a separate container of images, each with a unique ID. Each accordion__title will need to have a referene to an ID for the image it should show. Example: data-accordion-img="some-img-ID".

The images container and accordion container can be placed independently of each other. In the example below, they are laid out to show images on the left of the accordion when viewed on a large screen.

sample image sample image
Accordion Title
Accordion Title
<div class="lg:flex">
	<div class="accordion-images">
		<img src="https://via.placeholder.com/300&text=image+1" alt="sample image" id="accordion1-img1" class="js-featured-image active">
		<img src="https://via.placeholder.com/300&text=image+2" alt="sample image" id="accordion1-img2" class="js-featured-image">
	</div>
	<div class="pl-8 flex-grow">
		<div class="accordion js-accordion">
			<div class="accordion__item js-accordion-item border-b border-gray-300 open" data-accordion-img="accordion1-img1">
				<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
					<div class="flex-grow font-sans-demi">Accordion Title</div>
					<div class="js-accordion-icon p-4 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
				</div>
				<div class="accordion__content js-accordion-content hidden py-6">
					Accordion Content
				</div>
			</div>
			<div class="accordion__item js-accordion-item border-b border-gray-300" data-accordion-img="accordion1-img2">
				<div class="accordion__title js-accordion-title cursor-pointer hover:text-brand-primary font-sans-demi cursor-pointer font-sans-medium flex items-center">
					<div class="flex-grow font-sans-demi">Accordion Title</div>
					<div class="js-accordion-icon p-4 text-lg-2 text-gray-400" data-inactive-icon="fa-angle-down" data-active-icon="fa-angle-up"><i class="fal fa-angle-down"></i></div>
				</div>
				<div class="accordion__content js-accordion-content hidden py-6">
					Accordion Content
				</div>
			</div>
		</div>
	</div>
</div>