How to use a glyph icons in the collapsible section button

Last updated Sep 25 2019

The collapsible section has a button in its header, that opens and closes the section.
The default sign in the button is + (plus) or - (minus). But if you wish to use a glyph icon instead you can do the following:
1- Choose a glype icon you want to use.

2- Select the “collapsible section” on canvas.
3- Remove the + sign from the Expand label and - sign from the Collapse label.


4- Set the glyph icon for the expand button (which will show when the section is closed).
- Go to the ‘Properties Panel’> ‘Element’ tab > ‘Style’ option
- Choose the “Button expand” in the Apply style to” dropdown.
- Open the “CSS Name” category and paste the glyph icon code (for example: glyphicon glyphicon-chevron-right).


5- Set the glyph icon for the collapse button (which will show when the section is open).
- Go to the ‘Properties Panel’> ‘Element’ tab > ‘Style’ option
- Choose the “Button collapse” in the Apply style to” dropdown.
- Open the “CSS Name” category and paste the glyph icon code (for example: glyphicon glyphicon-chevron-down).
6- You can now test the form by publishing it, opening and closing the section.



CommentsLogin Required
Didn’t find what you were looking for?
Try the following for assistance or Use the Search box.