[Silk UI Web] Accordion Load Content on Click

[Silk UI Web] Accordion Load Content on Click

  
Forge Component
(63)
Published on 14 Jun (9 days ago) by OutSystems Labs
63 votes
Published on 14 Jun (9 days ago) by OutSystems Labs

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.

Thanks,

Ana

Solution

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.

Cheers,

José

Solution

Thank you José. It works great.