• Accordion for SharePoint, Office 365
    and SAP Portal

    Add 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

  •  

    Live Preview

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 – –
  • 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 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!

  •  

    Live Preview


Explore More ShortPoint Design Elements
For SharePoint, Office 365 and SAP Portal

Everything you need to build gorgeous intranet sites and portals


Abbreviation
Accordions
Alert
Animate
Background
Before and After
Blockquote
Button
Countdown
Counter Boxes
Date Lists
Divider
Dropcap
Emphasis
Events
File Lists
Frame
Icon
Icon Lists
Image caption
Image Carousels
Image Titles
Image Lists
Info
Label
Lead
Link
List
Map
Note
Panel
Popover
Row
Section
Simple Lists
Slideshows
Small
Table
Tabs
Templates
Textshows
Tickers
Tiles
TOC Navigation
TOC Content
Toggles
Tooltip
Vimeo video
Well
Youtube video
More Design Elements Soon