Bolt Design System

Accordion Item Deep Linking

Deep linking will auto-scroll to your selected accordion item. If there is a "fixed" element on the page, it may overlap your tabs. To fix this, add js-bolt-sticky class to the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scroll_offset for any additional adjstments. See a demo: ?selected-accordion-item=second-accordion-item-3. This link will open in a new tab in order to demonstrate the functionality.

Demo

Placeholder "fixed" element, should not overlap active accordion item when page first loads.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  scroll_offset: 5,
} only %}

HTML