The accordion component is no longer present in servicenow UI Builder. To achieve this we need to create custom component. So, I have created a workaround that works similar to accordion.
Step 1 : Create a container with heading and button as shown below, (can be any page or inside component)
Left side content panel looks like below,
Step 2 :Create a client state parameter of type boolean. (I have created with name hide as shown below)
In above screenshot, I selected intial value to true so that the address details will be collapsed by default.
Step 3 : Create another container below and add your content that needs to be inside accordion. In below screenshot you can see the address details that are part of it.
Step 4 : Select the above container created and add a dynamic data binding to the component visibility as shown below,
Step 5 : Select the button created in step 1 and configure the component as shown below,
Two things are added, one is to dynamically change the button icon and another is tool tip text based on the client state parameter created in step 2. so if client state parameter value is true, icon should be 'chevron-down-fill' and if value is false icon will be 'chevron-up-fill'. Similarly the tool tip text will be Expand if value is true and collapse if value is false.
Step 6 : Go to events section for the same button and add an event to set client state parameter.
If you notice in above image, the value is NOT(hide). so this works like toggle button.
So everytime user clicks, the client state parameter value changes.(from false to true or from) true to false. Using this parameter I am controlling the required container under it.
The final result looks as below screenshot.
The intial value of client state parameter is set to true so you can see the tooltip text as expand and no container is opened.
And when user clicks on the button, it changes as shown below,
