• WE ARE MOVING

    Visit our new demos website powered by SharePoint and ShortPoint.

  • LET’S GO!

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.

Accordions ShortPoint Option

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
  • Icon location will be on the left
  • Useful in RTL sites
color color name primary
  • the active accordion color and hover style
  • all colors available at ShortPoint Colors page
open number Open the accordion by its order location
icon-open icon name icon-plus-square-o
icon-open icon name icon-minus-square-o

Accordion ShortPoint Option

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.