How to build accordion in ui builder

[vinaytulaba]

We are creating new workspace and trying to create sections. For this we need help of accordion component. but this is no more available in ui builder for developers. As per documentation it says we have to code it but how can we do this?

https://horizon.servicenow.com/workspace/components/now-accordion

[vinaytulaba]

@Maria Gabriela  Could you please check this and help me out. I am trying for a collapsable section inside a card container

[Dinesh Chilaka]

Hi @vinaytulaba ,

The documentation states that for custom components using the old method, we must include specific code developed in JavaScript and ReactJS, then deploy it to the instance via CLI. However, since the Zurich release, UI Builder allows creating custom components directly using existing ones—no coding required.

To confirm: Yes, the code in the docs needs to be copied for the legacy approach.

As a workaround, check the Content-Tree component—it's similar to the accordion and might work without all that setup.

If this helps, please mark it as helpful and accept the solution.

[lauri457]

Your link says to use the collapse component, simple demo below. Or you can see if Display value block | Horizon Design System works for you instead

Button click handler for above. State param a is tied to collapse components expanded prop and param b is bound to the icon on the collapse component.

function handler({api, event, helpers, imports}) {
    api.setState("a", !api.state.a)
    api.setState("b", api.state.a ? 'caret-down-fill' : 'caret-up-fill')
}