Toggle


Allow users to collapse and expand content with the Toggle Design Element. Content that can be organized into separate parts can be presented in a Toggle where your audience can choose to get more information by expanding content.








Toggle Options Demos


Default View


Toggle 1
Toggle 2
Toggle 3

Without Dividers


Toggle 1
Toggle 2
Toggle 3

Icon Location


Toggle 1
Toggle 2
Toggle 3

Different Colors


Success Color


Toggle 1
Toggle 2
Toggle 3

Danger Color


Toggle 1
Toggle 2
Toggle 3

Custom Icons


Toggle 1
Toggle 2
Toggle 3

Open By Default


Toggle 1
Nulla bibendum aliquet lorem, a tincidunt augue mollis sed. Ut in augue ligula. Proin pharetra magna vitae turpis commodo lacinia. Vivamus condimentum felis erat, non malesuada lorem semper ut. Aenean massa sapien, faucibus ac purus et, pellentesque semper libero. Vivamus pretium, risus sed fermentum posuere, enim lectus volutpat enim, non dapibus justo eros eu sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Toggle 2
Nulla bibendum aliquet lorem, a tincidunt augue mollis sed. Ut in augue ligula. Proin pharetra magna vitae turpis commodo lacinia. Vivamus condimentum felis erat, non malesuada lorem semper ut. Aenean massa sapien, faucibus ac purus et, pellentesque semper libero. Vivamus pretium, risus sed fermentum posuere, enim lectus volutpat enim, non dapibus justo eros eu sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Toggle 3
Nulla bibendum aliquet lorem, a tincidunt augue mollis sed. Ut in augue ligula. Proin pharetra magna vitae turpis commodo lacinia. Vivamus condimentum felis erat, non malesuada lorem semper ut. Aenean massa sapien, faucibus ac purus et, pellentesque semper libero. Vivamus pretium, risus sed fermentum posuere, enim lectus volutpat enim, non dapibus justo eros eu sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Options Description

Title – required! Toggle item title
No divider – divider will not be used to as separator between toggles
Icon Location – place where you will see open and close icons:
  • Left – icon location will be on the left (Useful in RTL sites)
  • Right – icon location will be on the right
Open – toggle will be open by default. If used in toggles, all will be open
Color – the active toggle color and hover style. All t Colors are supported
Open Icon – change the default open icon. All ShortPoint Icons are supported  
Close Icon – change the default close icon. All ShortPoint Icons are supported