Accordion Q and A Formatting
Create a new FAQ page and set up a a series of questions and answers using the following formatting rules :
- Each question should be wrapped in h3 tags
- Each answer should either be a single paragraph or if multiple paragraphs be wrapped in div tags.
Make sure you save the page.
Accordion Widget Settings
Next, drag a Genesis Club Accordion Widget into a say a home page widget area, or in a sidebar widget perhaps, and provide the the following widget settings as required.
- Optional widget label to display only on the admin screens.
- Optional widget title.
- Select the FAQ page you created earlier.
- Header Class
- Custom class to apply to the header – for example enter arrows if you want the header to have a uparrow when the question/answer is open and a down arrow when it is closed.
- Content Class
- Custom class to apply to the content – you might want to change the font, size, background or text color of the answers. If you are using this in a home page widget you will probably want to set a smaller font size than is set by the theme.
- Container Class
- Custom class to apply the container. For example, you might want to adjust margins, padding, background color, etc.
Accordion Usage Tips
Noindex Accordion Widget Source Pages
To avoid duplicate content on your site, you should mark your accordion page as noindex and exclude it from your XML Sitemap. This can be done in the Post Editor using a good SEO plugin such as Yoast SEO or The SEO Framework.
Testing The Accordion Format
An easy way to check that you have created the accordion correctly as a sequence of questions and answers is to mark the page as an accordion on the Genesis Club Post Settings Accordion tab. You can then view the page and make sure it is formatted correctly – all the questions/answers open and close when clicked.