-
Accordion for SharePoint, Office 365
and SAP PortalAdd Accordion Element to your SharePoint sites and pages.
Use this ShortPoint if you want to show content in your SharePoint page as accordion display. Its useful to create FAQ pages -
Accordion Examples
Accordion – Basic Usage
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis.
Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor.
Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum
massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum
lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Accordion 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget
lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien
lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Accordion 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus.
Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla.
Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod
dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu.
Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla,
turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur
justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non
condimentum justo ullamcorper.
Accordion – Without Divider
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis.
Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor.
Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum
massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum
lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Accordion 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget
lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien
lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Accordion 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus.
Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla.
Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod
dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu.
Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla,
turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur
justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non
condimentum justo ullamcorper.
Accordion – Icon Location
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis.
Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor.
Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum
massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum
lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Accordion 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget
lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien
lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Accordion 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus.
Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla.
Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod
dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu.
Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla,
turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur
justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non
condimentum justo ullamcorper.
Accordion – Different Colors
Color Danger
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis.
Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor.
Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum
massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum
lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Accordion 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget
lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien
lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Accordion 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus.
Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla.
Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod
dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu.
Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla,
turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur
justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non
condimentum justo ullamcorper.
Color Green
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis.
Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor.
Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum
massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum
lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Accordion 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget
lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien
lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Accordion 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus.
Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla.
Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod
dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu.
Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla,
turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur
justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non
condimentum justo ullamcorper.
Accordion – Custom Icons
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis.
Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor.
Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum
massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum
lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Accordion 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget
lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien
lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Accordion 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus.
Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla.
Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod
dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu.
Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla,
turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur
justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non
condimentum justo ullamcorper.
Accordion – Open By Default
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis.
Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor.
Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum
massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum
lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Accordion 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget
lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien
lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Accordion 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus.
Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla.
Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod
dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu.
Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla,
turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur
justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non
condimentum justo ullamcorper.
Accordion Features
-
Add Accordion
All what you need to do is just type the title and add some content.
Accordions ShortPoint Options
| Option | Value | Default | Description |
|---|---|---|---|
| no-divider | – | – | Divider will not be used to as separator between accordions |
| right | – | – | Icon location will be on the right |
| left | – | – |
|
| color | color name | primary |
|
| open | number | – | Open the accordion by its order location |
| icon-open | icon name | icon-plus-square-o |
|
| icon-close | icon name | icon-minus-square-o |
|
Accordion ShortPoint Options
| Option | Value | Default | Description |
|---|---|---|---|
| title | “text” | Required! Accordion title |
Why Two Option Tables? Because this ShortPoint consist of two ShortPoints (Parent and Childs). The accordion shortpoint should be inside accordions shortpoint. Thats why we have to describe the options you can use in each one.
-
More Accordion Examples
And that’s not all! Check more awesome Accordion examples on our demo site right now!
-
Explore More ShortPoint Design Elements
For SharePoint, Office 365 and SAP Portal
Everything you need to build gorgeous intranet sites and portals
More Design Elements Soon