[Silk UI Web] Accordion Load Content on Click

[Silk UI Web] Accordion Load Content on Click

Forge Component
Published on 2017-12-20 by OutSystems R&D
57 votes
Published on 2017-12-20 by OutSystems R&D

Hi everyone,

Is there any sample on how to use an accordion with a load on click functionality?

I would like to load the content of an accordion item just when user clicks to expand it. Similar to load on click from tabs.




Hi Ana,

In attach goes a simple implementation of that functionality. You will probably have to tweak it to your needs.

What I've done is:

  • Assumed that you had the accordion items in a ListRecords
  • Add a boolean value to the elements of the list (it will serve as indication that the content is to be loaded)
  • Add If widgets in each Accordion Item to show or not the loaded content (the condition is the boolean variable)
  • Add another event to the clicking of the header of the accordion item
  • In that event it will:
    • get the index of the element that you clicked on
    • Put that index into an input field
    • Click the button (you should hide the input field and the button, they are there only for debugging)
  • In the action of the button it will:
    • set the boolean variable of the element of the list given by the index to true
    • refresh that item of the list
    • add again the event to all the headers of the accordion items
  • That's it.

In short, when you click on a header of an accordion item it will set a condition of an item to true and when you refresh that item it will load the content.

See if it works for you.




Thank you José. It works great.