Braindead to Accordions for al!

I finally have a working version of a multi-accordion group with an associated image.

I ended up going down a rabbit hole, deciding that, for it to be really useful, you needed to be able to create as many accordions as you required. To do this elegantly in Elements, you need to use a COLLECTION. So that is the route I took. Took a lot of studying to figure out how to use a collection.

By using a collection, you can specify the details for each accordion through the item properties, using the collection property inspector you can then create whoever many you need. It allows you to enter a TITLE, CONTENT, an associated IMAGE (other things in the future), and whether the accordion is initially expanded or not.

This is what it looks like in action.

Here are the current properties for the component. I will gradually add all the styling properties so that, eventually, all aspects of the element can be controlled.

This was an interesting project. Still lots to do, but it is now functional enough for my use case.

NOTE: the Expanded property WILL NOT be responsive, just forgot to set the flag.

4 Likes