have accordion load with all sections closed at first?

  • 4
  • Idea
  • Updated 11 months ago
  • Under Consideration
Is it possible to have all sections of the accordion component load in the closed state?
Photo of Chad Gill

Chad Gill

  • 1,394 Points 1k badge 2x thumb

Posted 1 year ago

  • 4
Photo of John Dahlberg

John Dahlberg, Champion

  • 4,620 Points 4k badge 2x thumb
We need this too.  
Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 4,664 Points 4k badge 2x thumb
Thanks for sharing that idea! Unfortunately, it's not possible at the moment, so I logged an enhancement request.
Photo of Erik Wahlberg

Erik Wahlberg

  • 2,678 Points 2k badge 2x thumb
In the interim, you could add a blank accordion section at the topmost portion, and render it away with something like Running User Profile Name = ASDF

Currently the top most accordion is opened by default on pageload, so if that's rendered away it will appear as if the others are in a closed state. 
Photo of John Dahlberg

John Dahlberg, Champion

  • 4,620 Points 4k badge 2x thumb
Erik - That approach didn't work because it simply won't render the first section when the page loads so the accordion builds as if the first item doesn't exist and the second accordion item loads as the first item and is open (at least that's what happened when I tried this).  This is a timing issue where you need to allow the component to render into the page and then un-render it.  

I did build on this idea and get a reasonable workaround.  What I did was setup a UI only model with a checkbox field defaulted to true.  Leave the option to create a default row turned off.  Then you set the rendering logic on the first accordion item to not display if the value of this field is set to true.  Then add an event triggered sequence to fire on "Skuid Page: Rendered" and add a row to the UI only model.  This will hide the first item in the accordion and leave the rest closed.  
Photo of Spencer Ince

Spencer Ince

  • 226 Points 100 badge 2x thumb
This worked out really well. Thanks John!