Accordion Set Open/Close State by Breakpoints and All Open or All Closed

Wishlist
1

I love the accordion feature in divhunt, the way it is implemented gives us great design freedom with the accordion functionality.

The only thing I am missing is the ability to set the open/close state according to breakpoint and to choose if I want all the accordion loop instances to be open or closed.

Let me explain why this is usefull and how it would look…

Video explanation with examples - 3 min duration:

Divhunt Accordion Feature Request - All Open or Closed, Breakpoint Responsive

Text explanation:

The way the accordion works now is great for the typical FAQ functionality. The way I am using it though, besides for FAQ’s, is to show/hide more information for various sections. You can see that in action on this site:

Scroll down a bit till you find an accordion and click on it to see how it looks and works.

At the moment I am setting all accordion loop instances to be closed by setting the ‘Opened’ setting to be higher than the amount of loops, so for example is an accordion is looped 3 times, I set the ‘Opened’ field in the settings to 4 so that all the questions (or whatever) are closed. A dedicated button for this (all open/ all closed) might be useful to avoid confusion and questions about how to do it.

I would like on a desktop resolution for all accordion instances to be open since on Desktop there is plenty of space and I do not need to tidy up information by hiding it into collpased accordions. On mobile however I would like all accordions to be collapsed as default state.

Using accordions like this is is a great way to tidy up information for small mobile screens by showing only the most important stuff by default and allowing the user to expand sections for more info where that is of interest.

I hope this is something useful for Divhunt users and that it can be implemented by the team.

If you are curious about how this would look in practice, please view the video explanation linked above.

2

Hey,

I just figured out how to keep them all open/closed by accident but I guess it works.

  1. For them to be all open, create only one accordion as a component and then loop it as many times as you want as a component instance. This way (when open is set to 1) all looped instance will be set to 1 and therefore they’ll all be opened.

  2. For them to be all closed, do the same as before just instead of open = 1 set open = -1. Since there is no -1 accordion, they’ll all be closed.

It’s not the perfect solution since previous opened accordion won’t close when you click next one, but it’s a somewhat good workaround

I hope this helps!

1 Like
3

Hi @aleksandar, wow thanks a lot for that tip, really appreciate you taking the time to post it here for me, you da man :muscle: I will test it out shortly, but yeah, I think this handles the all open-all closed part of this feature request. I can live with the not closing the previous tab when another tab is clicked to open (no single mode)

Now all that remains to get the totality of my desired functionality is to have this be responsive to breakpoints so that I can have e.g. all open on Desktop and all closed in Mobile.