Dynamically added elements to an accordion

Hello, I think that SiteJet Builder is a great instrument while building static websites. My use case is just little different 'cause I want to use object created within a sitejet web page and reuse against a json data bean.

I wrote the js code (not wiped at any deploy using a nginx virtual mapping) and included at the bottom of the page by an html block. This code take a json data bean and creates elements of an accordion (trigger and content) cloning the one built static into the page and wiped at the end of the script.

Perhaps, I dunno, there’s something I miss because the new elements generated and placed at the right place with new element ids calculated in order to not overlap with others don’t works and integrates with the logic of the accordion itself.

If you want to look at the page (the accordion is on the bottom of the page) you can visit Calendario - lab.dev.pallavolo.me

I repeat myself: It’s a very clever tool but I miss a way to reuse objects within the page dinamically.

1 Like

Hey @Lucian_Dinu and @Imre_Fekete are you able to help with this?

Could you think a way to extend the use of your presets binding then to data fetched using apis?

Hey @Filippo_Adessi

The only way to add dynamic content and via an API would be our Collection feature, actually. Otherwise, there is no plan to dynamically add elements otherwise.

Have you tried that Collection feature already?

Nope! I have to review the “Collection feature” 'cause it’s the first time I read about. However I have developed my script which creates (cloning and appending after changing ids and accordion name into data-animation attribute) but nothing! Elements added by dynamically remain static even if there is no overlapping among them. You can see the last version here Accordion - lab.dev.pallavolo.me

Hey there,

Well, as I said, those dynamics are probably not realizable with the elements and if, that would exceed my / our support. So maybe the collection feature could really be a solution on the long run. :raised_hands:

Ok, Andre. I think the issue stays into applying CSS after the document has been fully loaded. I will apply my own accordion logic lo let it play smootly! :wink: Thank you for your support.

1 Like

Nice one! Enjoy :slight_smile:

Hey @Filippo (and anyone else who stumbles on this later :eyes:),

This is a great post — even though it’s from last year, the question is still super relevant for anyone trying to build dynamic components in Sitejet, like accordions from a JSON object.

Andre was totally right: the recommended way to generate dynamic content (like your accordion entries) is by using Collections. They let you build one block — say, an accordion item — and have Sitejet automatically loop through your data to create more.


:light_bulb: For those new to Collections:

Think of it like a data table (or a JSON array) inside Sitejet. You design one item visually (with title, content, etc.), and Sitejet handles the rest — even generating dynamic IDs so your interactions stay clean and avoid conflicts.

It’s especially handy when:

  • You’re pulling in structured content (like blog entries, product specs, FAQs)
  • You want to avoid manually cloning sections
  • You’d like to skip custom JS and make it future-proof

Filippo — if you’re still around, your approach was super creative! Would love to hear if you ever got it working fully.
And to any newer users: feel free to ask if you’d like help converting a JSON idea into a working Sitejet Collection layout.
This use case comes up more often than you’d think.
And again — welcome to the community! :tada: You’re clearly digging deep already.