A few examples of Accordion Panels that you can use on any WordPress Page or Post with following shortcodes:
[accordions]
[accordion title="Title One"] Your content goes here... [/accordion]
[accordion title="Title Two"] Your content goes here... [/accordion]
[accordion title="Title Three"] Your content goes here... [/accordion]
[/accordions]Accordion Light
Title One
Title Two
Title Three
[accordions]...[/accordions]Accordion Dark
Title One
Title Two
Title Three
[accordions style="dark"]...[/accordions]Accordion: align left and 40% width
Title One
Title Two
Title Three
Donec nec nisi mi. Sed malesuada ante eget ligula tristique congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ullamcorper, nunc et luctus vulputate, sapien metus gravida enim, eu tempor urna mauris a enim. Cras eu massa enim. In hac habitasse platea dictumst. Cras bibendum porttitor turpis, eu sodales velit ultricies id. Etiam egestas malesuada lectus non ornare. Nullam sed tellus ac tellus fermentum vehicula vel non orci. Maecenas sem magna, bibendum id elementum vel, luctus ac velit. In posuere diam in sapien blandit iaculis. Aliquam erat volutpat. Nunc id sem id orci viverra consectetur. Aenean elementum varius turpis, in rhoncus magna ultricies quis. Nullam dignissim gravida elit ac semper. Maecenas vel erat in urna fringilla mattis. Maecenas ultrices posuere tempus. Sed nunc ipsum, suscipit eget tincidunt vel, aliquet a enim. Integer viverra convallis enim id facilisis.
[accordions align="left" width="40%"]...[/accordions]Accordion: align right and 40% width
Title One
Title Two
Title Three
Donec nec nisi mi. Sed malesuada ante eget ligula tristique congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ullamcorper, nunc et luctus vulputate, sapien metus gravida enim, eu tempor urna mauris a enim. Cras eu massa enim. In hac habitasse platea dictumst. Cras bibendum porttitor turpis, eu sodales velit ultricies id. Etiam egestas malesuada lectus non ornare. Nullam sed tellus ac tellus fermentum vehicula vel non orci. Maecenas sem magna, bibendum id elementum vel, luctus ac velit. In posuere diam in sapien blandit iaculis. Aliquam erat volutpat. Nunc id sem id orci viverra consectetur. Aenean elementum varius turpis, in rhoncus magna ultricies quis. Nullam dignissim gravida elit ac semper. Maecenas vel erat in urna fringilla mattis. Maecenas ultrices posuere tempus. Sed nunc ipsum, suscipit eget tincidunt vel, aliquet a enim. Integer viverra convallis enim id facilisis.
[accordions style="dark" align="right" width="40%"]...[/accordions]Options:
- style: (default: light) | Optional » light, dark
- align: (default: none) | Optional » left, right
- width: (default: 30%) | Required with align » You can specify the width in px or %
- class: (default: custom-accordion) | Optional