When you create a new accordion component it gives you 3 panel groups (header and collapsible content).
I need an accordion with 4 groups. How is this done?

Once you create an accordion is it possible to add or remove groups to the existing accordion i.e. by duplicating or deleting groups?

Import an accordion component into your project, and then look it up in the inspector pane. You will see that it starts with a container (not counting any rowns or columns now). That container is for the whole accordion. Inside that container there are three containers (class name 'card'), one for each 'group'. You need to collapse them, so that you have just the three, then inside them are more containers. Select one of those three containers, go to the Design pane and make a copy of it. That's it.

Ooops, I didn't see that you were asking about Bootstrap 3. Well, it's the same procedure, but this time it is the first container you find in the Inspector panel, with the class names 'panel' and 'panel-default'. Copy one of those.

Thanks. But it seems to duplicate the code in the copied panel - so when you click on it in a browser it opens the content for the copied panel. For example I copied the 3rd panel.panel-default to make a 4th group. When I click on the 4th group it opens the content for the 3rd group

Yes, you need to change the ID. For the 3rd panel it's 'headingThree' and that has to be changed to say headingFour. Then inside the next container ('panel-heading') is a link container with the Href #collapseThree which also has to be changed to ...Four. The same link container also has some Attributes. Open the one called Aria controls and change the value so that it also ends in Four.

Thank you Inger. That worked!