Components
Dynamic accordion

Dynamic accordion

Published
July 23, 2024
Category

Dynamic accordion - Posts

What is Component Madness? Component Madness is once in a year event from HeadspinUI team. It features 7-day in row releasing various solutions in form of the Components. 2024 Lineup Day 1 Age Verification Variant 1Variant 2Variant 3 Day 2 Skip Link Variant 1 Day 3 Hotspot Variant 1 Day 4 Grid Switcher Variant 1 […]

We’ve release 3 components which you could user to verify users before showing sensitive content. While it is pretty easy to this in Breakdance and could be done in 20mins, some users may struggle with logic and making small code to check and set cookie. Variation Verfication type Video Link to solution 1 Year input […]

This dropped on my mind when it comes to Copilot plugin. We could use it as slogan. Keep reading to find why. Lean Plugin produces lean code. We’ve strategic parts that we don’t give options to disable because some things need to work, if you ever drop some our design, you should not have ability […]

We’re proud to announce new version of our Headspin UI Copilot plugin. Release video covers new Dynamic Theming feature with real world use-case demo. Improved Fluid Workflow We are stepping up the CSS fluid variables game by introducing Fluid Charts. With our initial version, we are exploring ways to illustrate fluid values so that users […]

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.3.0
Built with
Breakdance
and
Headspinui
@ 2024 HeadspinUI. All rights reserved.