Headspin Logo
1.2.3
Components
,
Dynamic accordion

Dynamic accordion

Published
July 23, 2024
Category
,

Dynamic accordion - Posts

As Headspin offers CSS variables, you can use it in many ways. So far this is my favorite and fastest way how to get started. -> start building website. In case I need some repetitive styles -> I will use presets and apply headspin css variables (e.g. –hfs-h3). If I feel like the font sizes […]

The Slider Framework is a wrapper code for the Breakdance Builder that allows users to easily create and customize responsive sliders using the Swiper.js library. It integrates seamlessly, offering extensive options for layout, navigation, and effects, event for making highly customizable slider creation simple and flexible even for non-developers. For developers we are providing code […]

An a11y-friendly Dynamic Tabs component is designed to be accessible and responsive, providing a seamless user experience across devices. It adapts to different screen sizes by transforming traditional tabs into a dropdown menu or accordion on smaller screens. This component ensures keyboard accessibility, appropriate ARIA roles and attributes, and proper focus management, making navigation easy […]

Whiskey template is being shipped as a whole “site” via Updraft plugin. Getting Started You always need to start with a fresh install of WordPress. As a first step, install plugin UpdraftPlus: WP Backup & Migration Plugin and activate it. Then go and download files from Whiskey template – you should be able to see […]

The renderer is stuck in an inifite loop, because…’post’ with ID 5581 renders ‘post’ 5983 (edit)’post’ with ID 5983 renders ‘post’ 5983 (edit)And so on… a ‘post’ could be a Breakdance template, global block, WP post, page, or any other content

Dynamic accordion - Repeater

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Overview

With dynamic accordion you can easily fetch dynamic data from posts or repeater field (ACF or Metabox). It comes with few predefined attributes so you can control its behavior. These attributes can be found on the Post Loop Builder or Repeater element under Advanced > Attributes:

Attributes

  1. hs-expand-first - set this to true or false, if you want first accordion item to be opened / closed.
  2. hs-expand-all - set this to true or false, if you want all accordion item to be opened / closed. This option will override hs-expand-first.
  3. hs-close-siblings - set this to true, if you want to close other siblings when opening one item.
  4. hs-header-scroll - set a maximum viewport where it will apply scroll to header when accordion header is being clicked (handy when you have long content and scrolling on mobile). If you want it 767px and below, just type 767. If you want to disable it => set it to false.
  5. hs-faq-schema - by default this option is false. Set this to true if you want to enable FAQ Schema.

You might also like

Find more about Headspin UI

Headspin Logo
1.2.3

Products

Copilot Wireframes Sites Components

Resources

Documentation Guides Inspiration Tutorials Blog Support Pricing Changelog Roadmap Testimonials

Community

Facebook X Discord

Legal

Privacy Policy Cookie Policy Terms and Conditions License
Built with
Breakdance
and
Headspinui
@ 2024 HeadspinUI. All rights reserved.
'; //document.body.appendChild(iframe); var html = document.querySelector("html").outerHTML; var body = target.outerHTML; target.replaceWith(iframe); iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); //document.querySelector("iframe").contentWindow.document.querySelector("body").innerHTML = body; iframe.onload = (event) => { iframeCleaner(); }; var doc = iframe.contentDocument || iframe.contentWindow; var _timer = setInterval(function() { console.log("timer-load"); if (doc.readyState == 'complete') { clearInterval(_timer); iframeCleaner(); } }, 100); } function iframeCleaner(){ var doc = document.querySelector("iframe").contentWindow.document; var sections = doc.querySelectorAll("body > *"); sections.forEach(section=>{ if(section.tagName != "MAIN") section.remove(); }); if(doc.querySelector(".mbfp-btn")) doc.querySelector(".mbfp-btn").remove(); } /**/ const targetNode = document.querySelector("html"); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: false, subtree: false }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type === "childList") { console.log("A child node has been added or removed."); } else if (mutation.type === "attributes") { var att = targetNode.getAttribute("data-hsx"); var iframe = document.querySelector("iframe"); if(iframe) { iframe.contentWindow.document.querySelector("html").setAttribute("data-hsx",att) } } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); })