Accordion

Use accordions as an interactive way to avoid scrolling over items that you don't need everyone to see. Allow visitors to create their own site experience by concentrating their focus on items they choose to expand. This module is a great solution for FAQ sections, "How-to" sections or resume experience sections.


Site Goal(s): | Use Case(s): , ,

Simple Accordion

Standard accordion module with simple styling options in a Q&A setting. 

Have more questions? Lorem ipsum dolor sit amet, get in touch consectetur adipiscing elit.

Advanced Accordion

Advanced accordion module styled with extra styling options and icons in a Work Experience section or resume setting. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit (2010-2013)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. 

Nulla posuere sollicitudin aliquam ultrices (2013-2015)

A scelerisque purus semper eget duis at tellus at urna. Aliquam ut porttitor leo a diam. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. 

Donec a cras semper auctor neque vitae tempus (2015-Present)

Etiam erat velit scelerisque in dictum non. Venenatis cras sed felis eget velit. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Convallis a cras semper auctor neque vitae tempus quam pellentesque. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Duis ut diam quam nulla porttitor massa id neque. Nulla posuere sollicitudin aliquam ultrices. 

FAQ Page

Enable Schema Markup if you are setting up a unique FAQ page on your website. The module adds 'FAQ' schema to the page as per Google's Structured Data guidelines. Click here for more details.

How it looks on Google: 

faq-img-3
What is the return policy?

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non.

How long does it take to process a refund?

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non.

What is the policy for late/non-delivery of items ordered online?

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non.

Lacus suspendisse faucibus interdum posuere?

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non.

Etiam erat velit scelerisque in dictum non?

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. 

How-To Page

If each step is to be read in a sequence then you can use the How-to Schema Module. To use schema markup, your page must have only a single instance of this module. It adds 'How-To' schema to the page per Google's Structured Data guidelines. Click here for more details.

How it looks on Google: 

howto-ctr

Time Needed: 3 days

How to tile a kitchen backsplash

1. Prepare the surface

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non.

2. Plan Your Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus suspendisse faucibus interdum posuere. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non.

3. Prepare and apply your mortar

A scelerisque purus semper eget duis at tellus at urna. Aliquam ut porttitor leo a diam. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus.