Spollers deployment

Main features

Use multiple spoller blocks on the same page
Enable/disable by screen width (breakpoint)
Accordion mode (only one item open at a time)
Close on click outside the spoller
Animated open/close
Semantic markup & accessibility via <details> / <summary>

Note

The component initializes automatically when it detects data-anim-spollers in markup. When initialized, the wrapper gets the class --spoller-init.

Component location

Files are located in src/components/layout/spollers. Inside you’ll find JS, an HTML example, and SCSS styles for the component.

Basic usage

Create a wrapper with data-anim-spollers, then use <details> items. Adding data-anim-spollers-open to a <details> makes it open by default.

Spollers block (2 items)

<div data-anim-spollers class="spollers">

	<details class="spollers__item" data-anim-spollers-open>
		<summary class="spollers__title">Spoller title #1</summary>
		<div class="spollers__body">Spoller content #1</div>
	</details>

	<details class="spollers__item">
		<summary class="spollers__title">Spoller title #2</summary>
		<div class="spollers__body">Spoller content #2</div>
	</details>

</div>

Init class

After initialization, the wrapper receives --spoller-init. You can use it in CSS to style the active/interactive state.

Enable/disable on breakpoint

To control when spollers are active, set a value on data-anim-spollers: width,type. The type can be:

max (default) — enabled below the given width
min — enabled above the given width

Enable only on width ≥ 768px

<div data-anim-spollers="768,min" class="spollers">
	...
</div>

Accordion mode (one open at a time)

Add data-anim-spollers-one to allow only one opened item inside the block. Opening a new spoller will close the previously opened one.

Accordion mode

<div data-anim-spollers data-anim-spollers-one class="spollers">
	...
</div>

Animation speed

To change open/close animation duration, use data-anim-spollers-speed on the wrapper. Value is milliseconds (default: 500).

1s animation

<div data-anim-spollers data-anim-spollers-speed="1000" class="spollers">
	...
</div>

Close on click outside

If you want a spoller to close when the user clicks outside the spoller block, add data-anim-spollers-close to the corresponding <summary>.

Close by outside click

<div data-anim-spollers class="spollers">
	<details class="spollers__item">
		<summary data-anim-spollers-close class="spollers__title">Spoller title</summary>
		<div class="spollers__body">Spoller content</div>
	</details>
</div>

Scroll to opened title

If you need the page to scroll to the title of the opened spoller, add data-anim-spollers-scroll to the <details>. Optionally, provide a numeric offset (px) as the attribute value.

Scroll to title (basic)

<div data-anim-spollers class="spollers">
	<details data-anim-spollers-scroll class="spollers__item">
		<summary class="spollers__title">Spoller title</summary>
		<div class="spollers__body">Spoller content</div>
	</details>
</div>

If your header is fixed and you want to compensate its height, add data-anim-spollers-scroll-noheader. You can also set an extra offset value:

Scroll to title (offset + ignore header)

<div data-anim-spollers class="spollers">
	<details
		data-anim-spollers-scroll="20"
		data-anim-spollers-scroll-noheader
		class="spollers__item">

		<summary class="spollers__title">Spoller title</summary>
		<div class="spollers__body">Spoller content</div>

	</details>
</div>

Download

Build clean FAQ blocks, mobile accordions, and content toggles with the Spollers component. Download the template and ship faster.

Download Animmaster Vite Template Save your time — start now

Component: Spollers Accordion-style content reveal with breakpoints, animations, and helpers