Flexible FAQs Documentation

Last updated by David on October 30, 2018 10:35

After purchase you can download the Flexible FAQs plugin zip file from your WPGO Plugins account area. You can also find your plugin license key here. Complete the following steps to install the Flexible FAQs WordPress plugin on your site:

  1. On the site you wish to install the plugin go to the WordPress admin dashboard and click the Plugins link in the left hand menu.
  2. At the top of the Plugins list page click the Add New button, and then on the next page click the Upload Plugin button.
  3. You’ll now see a Choose File button. Click it and select the plugin zip file you downloaded to your computer earlier.
  4. Once the plugin has been selected click the Install Now button to begin the installation process.
  5. In a few seconds you should see a Plugin installed successfully message. Click the Activate Plugin link underneath to make the plugin ready for use.

Once the plugin is installed and activated go to Flexible FAQs > Settings in the WordPress admin. Enter your plugin license key to make sure you’ll receive plugin update notifications.

Getting Started

Go to Flexible FAQs > Add New to create a new group of FAQ items. Add a title for the FAQ group. The title will be displayed in the admin when viewing the Flexible FAQs > All FAQs index page. It is also displayed on the front end above the list of FAQ items but it can be easily removed or overridden as required. (see shortcode attributes section)

Creating & Editing FAQ Items

Click the Add New FAQ button to create a new individual FAQ item. This will be added to the list of FAQs in the Manage FAQs meta box. Newly created FAQs will be expanded by default ready for editing the Question and Answer fields. You can choose to use the full rich text editor to add FAQ content, or the text only editor to add HTML code manually.

Add more FAQ items in the same way, and click Publish or Update to save changes to the database.

It’s useful to know that there’s more than one way to expand/collapse FAQ items in the Manage FAQs meta box. You can use any of the following methods:

  • Double click the title bar of any FAQ item to expand/collapse.
  • Click the Edit FAQ item icon (located to the right of each FAQ title bar). Note: When an FAQ item is currently collapsed this icon is only visible when the title bar is hovered over.
  • When an FAQ item is expanded you can also collapse it by clicking the Done button located towards the bottom right of the FAQ editor.

Reordering FAQ Items

By default FAQs will appear on the front end in the same order as they appear in the admin Manage FAQs meta box. To reorder FAQ items simply hover over the icon to the left of an FAQ item title bar. The mouse icon will change to a cross shaped icon indicating that you can drag the FAQ item up or down to reorder the FAQ list as required.

Flexible Faqs
Easily reorder your FAQs via drag/drop. Super simple!

Note: You can only reorder collapsed FAQ items. So it’s usually a good idea to collapse all FAQs before attempting to reorder them.

Displaying FAQs On The Front End

Once you’ve created your FAQ items you can easily display them on the front end of your site using the [faq] shortcode. Simply copy the shortcode in the FAQ Shortcodes meta box and paste into any post or page.

Once the page has been updated you can view it on the front end to display the FAQ items.

Deleting An FAQ Item

To delete an existing FAQ item from inside the FAQ editor simply hover over the title bar of the FAQ item you wish to delete and click the Remove FAQ Item ‘X’ shaped icon when it appears. You’ll be asked for confirmation before the FAQ item is removed to prevent accidental deletion by the user.

Shortcode Attributes

There are plenty of shortcode attributes to help customise FAQ styles.

Here is the full list of shortcode attributes currently available for the [faq] shortcode. The default value is shown for each attribute.

id='' – ID of the FAQ group to display. (required)
topic='' – Topic ID to display multiple FAQ groups. This has priority over ID attribute.
template='1' – Template used to render FAQs.
style='1' – Style used. Each template can have multiple styles.
width='' – FAQ width. Applied to .flexible-faq-container or .flexible-faq-outer-wrapper depending on value of align_to_faq attribute. Can use normal CSS units (px, em, % etc.). e.g. width=’75%’.
align='' – Similar to width this centers .flexible-faq-container or .flexible-faq-outer-wrapper depending on value of align_to_faq attribute.
q_bold='true' – The font weight of the question text displayed on the front end.
description='' – Display an FAQ description. Nothing outputted if empty.
topic_label='true' – Display topic label if set to true. Has no effect if topic ID attribute is blank.
faq_group_class='' – Add comma separated list of custom CSS classes to .flexible-faq-wrapper.
faq_topic_class='' – Add comma separated list of custom CSS classes to .flexible-faq-wrapper.
margin_between_faqs='' – If rendering a topic (i.e. if topic attribute is specified) then use this attribute to add a comma separated list of custom CSS classes to .faq-topic-container.
faq_separator='false' – If true adds a separator div between each FAQ item.
faq_separator_border=''
q_a_separator='false' – If true adds .q_a_separator element as the first child of .faq-inner-answer or as the immediate previous sibling depending on the value of .q_a_separator_location.
q_a_separator_border='' – Customize border between Q and A for each FAQ item (visible when FAQ Q expanded). If non-empty then adds the specified border to an empty div element .q_a_separator as the first child element of .faq-inner-answer. Accepts any valid CSS border. e.g.
q_a_separator_location='outside' – Customize the .q_a_separator element added to the immediately previous sibling of .faq-inner-answer(?). If set to ‘outside’ adds .q_a_separator element as the first child of .faq-inner-answer. If set to ‘false’ .q_a_separator element isn’t rendered.
q_a_separator_border='1px #ff0000 solid' – If empty then .q_a_separator isn’t rendered.
faq_separator_border='' – Adds a border between individual FAQ items. If non-empty then adds the specified border to an empty div element .faq_separator as the last child element of .flexible-faq-wrapper. Accepts any valid CSS border. e.g. faq_separator_border=’1px #ff0000 solid’. If empty then .faq_separator isn’t rendered.
faq_border='' – Adds a border to .flexible-faq-wrapper. Accepts any valid CSS border. e.g. faq_border=’1px #ff0000 solid’.
faq_border_radius='' – Adds a border radius to .flexible-faq-wrapper. Accepts any valid CSS border-radius value. e.g. faq_border_radius=’4px’.
inner_q_border_radius='' – Adds a border radius to .faq-inner-question. Accepts any valid CSS border-radius value. e.g. faq_border_radius=’4px’.
inner_a_border_radius='' – Adds a border radius to .faq-inner-answer. Accepts any valid CSS border-radius value. e.g. faq_border_radius=’4px’.
container_border='' – Adds a border to .flexible-faq-outer-wrapper. Accepts any valid CSS border. e.g. faq_border=’1px #ff0000 solid’.
rotate_icon='true' – If true rotates .faq-expand-img (svg tag) by 180 degrees (hardcoded in CSS at the moment). If set to false an inline style is added to rotate by zero degrees.
no_icon='false' – If true adds a span.faq-question-expand element directly after span.question-text. If false no element is added. Use the icon attribute to set the icon used.
title=’true’ – Adds a h2 or h3 tag with the title entered on the FAQ editor screen as the first child element of .flexible-faq-container. For single FAQ groups this will be h2 and for a topic the tag will be h3.
custom_title='' – If the FAQ title is displayed via title=’true’ (true by default) then you can override the title set on the FAQ editor with this attribute. If this attribute is blank then the FAQ title is used.
icon_align='right' – If an icon is displayed then you can align it to the right (default) or left of .faq-inner-question.
icon='arrow1' – Sets the svg icon used for .faq-expand-img. Current accepted values are: ‘arrow1’, ‘arrow2’, ‘arrow3’, ‘plus1’, ‘plus2’.
qcolor='' – Adds a color style to .faq-inner-question. Accepts any valid CSS color value.
q_hover_color='' – Applies a hover color to .question-text. Accepts any valid CSS color value.
qcolor_expanded='' – (NOT SUPPORTED YET) Adds a color style to .faq-inner-question only when expanded. This overrides the qcolor value when Q is in expanded state. Accepts any valid CSS color value.
acolor='' – Adds a color style to .faq-inner-answer. Accepts any valid CSS color value.
acolor_expanded='' – (NOT SUPPORTED YET) Adds a color style to .faq-inner-answer only when expanded. This overrides the acolor value when Q is in expanded state. Accepts any valid CSS color value.
q_bg_color='' – Adds a background color style to .faq-inner-question. Accepts any valid CSS background-color value.
q_bg_color_expanded='' – (NOT SUPPORTED YET) Adds a background color style to .faq-inner-question only when expanded. This overrides the q_bg_color value when Q is in expanded state. Accepts any valid CSS background-color value.
a_bg_color='' – Adds a background color style to .faq-inner-answer. Accepts any valid CSS background-color value.
a_bg_color_expanded='' – (NOT SUPPORTED YET) Adds a background color style to .faq-inner-answer only when expanded. This overrides the a_bg_color value when Q is in expanded state. Accepts any valid CSS background-color value.
qpadding='' – Adds a padding style to .faq-inner-question. Accepts any valid CSS padding value.
apadding='' – Adds a padding style to .faq-inner-answer. Accepts any valid CSS padding value.
qmargin='' – Adds a margin style to .faq-inner-question. Accepts any valid CSS margin value.
amargin='' – Adds a margin style to .faq-inner-answer. Accepts any valid CSS margin value.
icon_margin='' – Applies a margin to .faq-question-expand. Accepts any valid CSS color.
icon_expand_bg_color='' – Controls the background color of the FAQ icon in the collapsed state. Accepts any valid CSS background-color.
icon_collapse_bg_color='' – Controls the background color of the FAQ icon in the expanded state. Accepts any valid CSS color.
icon_expand_color='' – Controls the color of the FAQ icon in the collapsed state. Accepts any valid CSS color.
icon_collapse_color='' – Controls the color of the FAQ icon in the expanded state. Accepts any valid CSS color.
faq_box_shadow='' – Adds a box shadow style to .flexible-faq-wrapper (each FAQ item). Accepts any valid CSS box-shadow value.
faq_container_box_shadow='' – Adds a box shadow style to .flexible-faq-outer-wrapper (FAQ wrapper). Accepts any valid CSS box-shadow value.
align_to_faq='false' – Align title and description to FAQ container if true (e.g. if the width attribute is changed to be different from 100%). If false the title and description always aligns to left and is 100% width.

FAQ Topics

If you have large sets of FAQs you can group individual FAQs together to make them easier to manage.

Edit an existing FAQ group, or create a new one and add some FAQ items to it. Then click Add New Topic to associate the FAQ group with one or more FAQ topics.

Once this is done and saved then the FAQ Shortcodes meta box will show a new shortcode that you can add to pages. On the front end each FAQ group associated with the specific topic will be displayed via the one shortcode.

This is a great time saver so you don’t have to paste in lots of individual shortcodes when you want to display multiple FAQ groups on the same page.

Demo Shortcodes

Here’s a list of the shortcodes used in the Flexible FAQs live demo. Simply copy/paste any shortcode into a WordPress page. Make sure you update the FAQ id attribute with a valid id from your own website.

Shortcodes For FAQ Style 1

[faq id='5851' custom_title="Example 1a" description="Default settings for style 1."]
[faq id='5851' custom_title="Example 1b" description="Separator between Question and Answer removed. Answer text left aligned with Question text. Also a custom (larger) expand arrow is used." q_a_separator="false" apadding="0px" amargin="-10px 0 20px 0" icon="arrow3"]
[faq id='5851' custom_title="Example 2" description="Expand icon left aligned. Vertical Question padding increased. Answer padding altered to align with Question text." icon_align='left' qpadding="20px 0 20px 0" apadding="10px 10px 10px 25px"]
[faq id='5851' custom_title="Example 3" description="Displaying expand icon is optional. Question text color and Answer background color customised." q_a_separator_border="0" faq_separator_border="1px #ddd dashed" qpadding="15px 0px 15px 0px" apadding="0px 0px 1px 0px" apadding="8px 20px 8px 20px" amargin="0" icon="arrow3" icon_expand_color='#5f5aa2' icon_collapse_color='#948fd2' qcolor_expanded="#125e8a" qcolor="#197BBD" no_icon="true" a_bg_color='#f7f7f7']
[faq id='5851' custom_title="Example 4" description="Question and Answer separator aligned with answer text. Custom expand icon." q_a_separator_location="inside" apadding="0 10px 15px 20px" icon="arrow2"]
[faq id='5851' custom_title="Example 5" description="Text and icon colors can be easily customized, including Question hover color. Separator between Question & Answer removed and expand icon is left aligned." apadding="0 10px 15px 20px" icon="arrow2" icon_expand_bg_color='#a4bcff' icon_collapse_bg_color='rgba(135, 165, 249, 0.5)' icon_expand_color='#fff' icon_collapse_color='#fff' acolor="#888" qcolor="#555" qcolor_expanded="#5984c5" q_a_separator="false" faq_separator_border="1px #eee solid" amargin="-7px 0 0 0" q_hover_color="#5984c5" icon_align="left" icon_margin="0 0.9em 1px 0"]
[faq id='5851' custom_title="Example 6" description="Alternative FAQ item separator border color and expand icon." q_a_separator="false" faq_separator_border="1px rgba(240, 101, 67, 0.6) dotted" icon="plus1" rotate_icon="false" icon_align="left" icon_margin="0 0.7em 3px 10px" icon_expand_color="#F06543" icon_collapse_color="#F06543" apadding="0 20px 0 38px" qpadding="20px 0" amargin="-15px 0 25px 0"]
[faq id='5851' custom_title="Example 7" description="Larger expand arrow. Dashed line for FAQ separator. Custom colors for question text." q_a_separator_border="0" faq_separator_border="1px #ddd dashed" qpadding="15px 0px 15px 0px" apadding="0px 0px 1px 0px" amargin="-10px 0px 10px 0px" icon="arrow3" icon_expand_color='#5f5aa2' icon_collapse_color='#948fd2' qcolor_expanded="#8245b5" qcolor="#674980"]
[faq id='5851' custom_title="Example 8" q_a_separator_border="0" faq_separator_border="1px #ddd dashed" qpadding="15px 0px 15px 0px" apadding="0px 0px 0px 0px" amargin="-10px 0px 15px 0px" icon="plus2" icon_align="left" rotate_icon="false"]
[faq id='5851' custom_title="Example 9" description="Set overall FAQ width to any valid CSS value. And center aligning is easy too!" icon_align="left" align="center" width="600px" icon="arrow2" icon_margin="0 0.7em 2px 0px" icon_expand_bg_color='pink' icon_collapse_bg_color='hotpink']
[faq id='5851' custom_title="Example 10" description="Spinning expand icon. Double line separator between FAQ items." q_a_separator_border="1px #eee solid" faq_separator_border="3px #eee double" qpadding="10px 0px 10px 0px" apadding="15px 0px 15px 0px" icon="plus2" qpadding="15px 0" apadding="10px 0" icon_expand_bg_color='#4B23CE' icon_collapse_bg_color='#C04CFD']

Shortcodes For FAQ Style 2

[faq id='5851' style="2" custom_title="Example 1" description="Default settings for style 2."]
[faq id='5851' style="2" custom_title="Example 2" description="It's so easy to change default styles! Here the expand icon is left aligned, and the FAQ container has a custom border, background, and text color." icon_align="left" faq_border="1px #50514F solid" q_bg_color="#CBD4C2" qcolor="#50514F" acolor="#50514F" icon_expand_color="#50514F" icon_collapse_color="#50514F"]
[faq id='5851' custom_title="Example 3" rotate_icon="false" style="2" icon="plus1" description="Simple elegant unobtrusive FAQ style. The question text doesn't have to be bold!" faq_border_radius="0px" q_bg_color="transparent" apadding="0px 14px 10px 14px" amargin="-8px 0px 0px 0px" acolor="#444444" qcolor="#444444" q_bold="false"]
[faq id='5851' style="2" custom_title="Example 4" description="Box shadow effect added to each FAQ item." faq_box_shadow="0 10px 12px -8px #d2d2d2"]
[faq id='5851' style="2" custom_title="Example 5" description="You can change the icon type and colors with ease." icon="arrow2"]
[faq id='5851' style="2" custom_title="Example 6a" description="Flexible color options allow you to apply any color scheme you like. Then tweak as required until you get the look you're after (see example 5b)." a_bg_color="#92dcc7" q_bg_color="#2c9b9d" qcolor="#def2f3" acolor="#fff" faq_border="1px solid #2c9b9d" icon_expand_color="#fff" icon_collapse_color="#fff"]
[faq id='5851' style="2" custom_title="Example 6b" description="Update colors in a matter of seconds. Change as many times as you like!" a_bg_color="#c8f5e8" q_bg_color="#77b2b3" qcolor="#f1feff" acolor="#185152" faq_border="1px solid #2c9b9d" icon_expand_color="#fff" icon_collapse_color="#fff"]
[faq id='5851' style="2" custom_title="Example 7" rotate_icon="false" description="Here's another example of a custom icon, this time aligned to the left." icon_align='left' icon="plus2"]
[faq id='5851' style="2" custom_title="Example 8" align="center" width="600px" description="This example overrides the icon alignment, and color. The FAQ container is set at a fixed width and is centered." icon_align='left' icon="arrow2" icon_expand_bg_color="#fff" icon_collapse_bg_color="#fff" icon_expand_color="green" icon_collapse_color="red"]
[faq id='5851' custom_title="Example 9" rotate_icon="false" style="2" icon_align='left' icon="plus1" description="Another custom icon, left aligned."]
[faq id='5851' style="2" custom_title="Example 10" width="75%" no_icon="true" description="Icons are completely optional too! Here the FAQ container width is also set to 75%. Padding for each FAQ item has been reduced too." qpadding="5px 15px 5px 15px"]
[faq id='5851' custom_title="Example 11" icon="arrow3" faq_border="2px solid #7cd3dc" style="2" description="Change the FAQ container border color and Q/A text color to whatever you want. The border radius has also been removed." faq_border_radius="0px" inner_q_border_radius="0px" qcolor="#FF5A5F" acolor="#888" icon_expand_color="#7cd3dc" icon_collapse_color="#7cd3dc" q_bg_color="#f9f9f9"]
[faq id='5851' custom_title="Example 12a" faq_border="0 solid transparent" style="2" description="FAQ container border removed." icon="plus2" icon_expand_bg_color="#FC9E4F" icon_collapse_bg_color="#3ddc76"]
[faq id='5851' custom_title="Example 12b" faq_border="0 solid transparent" style="2" description="Drop shadow and subtle Answer background color added." icon="plus2" icon_expand_bg_color="#FC9E4F" icon_collapse_bg_color="#3ddc76" faq_box_shadow="0 10px 12px -8px #d2d2d2" a_bg_color="#fbfbfb"]
[faq id='5851' custom_title="Example 13" style="2" description="We're mixing up this time with custom border, background, and text colors. Plus each individual FAQ item has reduced padding and a box shadow added because why not!" qpadding="5px 15px 5px 15px" apadding="10px 20px 10px 20px" a_bg_color="#ffd6c8" q_bg_color="#e8643e" faq_border="1px solid #EC4E20" icon_expand_color="#ffffff" icon_collapse_color="#ffffff" qcolor="#fff2f2" acolor="#bb2d04" faq_box_shadow="0 10px 10px -6px #ffccbd" margin_between_faqs="20px" faq_border_radius="0px" inner_q_border_radius="0px"]
[faq id='5851' custom_title="Example 14" style="2" icon="arrow3" icon_align="left" faq_border_radius="0px" icon_expand_color="#0a4680" icon_collapse_color="#de2525"]
[faq id='5851' style="2" custom_title="Example 15" description="FAQ container border removed, and custom expand icon left aligned." icon_align="left" icon="arrow2" faq_border_radius="0px" inner_q_border_radius="0px" faq_border="0px"]

Shortcodes For FAQ Style 3

[faq id='5851' style="3" custom_title="Example 1" description="Default settings for style 3."]
[faq id='5851' style="3" custom_title="Example 2" description="It's so easy to change default styles! Here the expand icon is left aligned, and the FAQ container has a custom border, background, and text color." icon_align="left" faq_border="2px #99bdb3 solid" q_bg_color="#b3cec6" qcolor="#444545" acolor="#444545" icon_expand_color="#444545" icon_collapse_color="#6b6b6b" q_bg_color_expanded="#C5E0D8" qcolor_expanded="#6b6b6b"]
[faq id='5851' style="3" custom_title="Example 3" description="More custom colors, plus a simple separator between FAQ items rather than a full border." icon_align="left" faq_border="0px #D4CDC3 solid" q_bg_color="#fdfbb6" a_bg_color="#F29E4C" qcolor="#d48c45" acolor="#fffdc0" icon_expand_color="#F29E4C" icon_collapse_color="#F29E4C" faq_separator="true" faq_separator_border="1px #ffdca7 solid"]
[faq id='5851' style="3" custom_title="Example 4" description="Let's go a bit more  minimalist on the color changes for this one." icon="arrow3" faq_border="1px #D4CDC3 solid" q_bg_color="#F8F4E3" a_bg_color="#fff" qcolor="#a09789" acolor="#a7a096" icon_expand_color="#a09789" icon_collapse_color="#a09789"]
[faq id='5851' style="3" custom_title="Example 5" description="Simple and elegant." icon="plus1" q_bg_color="#fff" apadding="0px 14px 10px 14px" amargin="-8px 0 0 0"]
[faq id='5851' style="3" custom_title="Example 6" description="Adding a chunkier border is very easy, as is adding a colored separator border between FAQ items (visible when expanded)." icon_align="left" faq_border="5px #c0F1aE solid" q_bg_color="#FCF6BD" a_bg_color="#fffbd6" qcolor="#ff8fc3" acolor="#dc79a6" icon_expand_color="#FF99C8" icon_collapse_color="#FF99C8" q_a_separator="true" q_a_separator_border='1px #f1b7d1 dotted']
[faq id='5851' style="3" custom_title="Example 7" description="Even just changing the expand icon type can make all the difference." icon="arrow2" q_bg_color="#fafafa"]
[faq id='5851' style="3" custom_title="Example 8" description="Changing the colors of the expand icon is easy too." faq_border="1px #A4243B solid" qcolor="#A4243B" q_bg_color="#efe3c0" icon_align="left" icon="arrow2" icon_expand_bg_color="#5A5A66" icon_collapse_bg_color="#5A5A66" a_bg_color="#f7edd2" acolor="#5a5a66" icon_margin="0px 0.7em 1px 0.7em"]
[faq id='5851' style="3" custom_title="Example 9a" description="Change the FAQ margin and/or padding to suit your requirements. Here the Question padding has been increased." faq_border="0px #586BA4 solid" qcolor="#324376" q_bg_color="#F5DD90" icon="arrow3" icon_expand_color="#586BA4" icon_collapse_color="#586BA4" a_bg_color="#fdf1cb" acolor="#172b50" qpadding="18px 10px 18px 20px" faq_separator="true" faq_separator_border="1px #e2c979 solid"]
[faq id='5851' style="3" custom_title="Example 9b" description="Or perhaps more compact spacing is what you're looking for?" faq_border="0px #586BA4 solid" qcolor="#324376" q_bg_color="#F5DD90" icon_expand_color="#586BA4" icon_collapse_color="#586BA4" a_bg_color="#fdf1cb" acolor="#172b50" qpadding="8px 10px 6px 16px" faq_separator="true" faq_separator_border="1px #e2c979 solid"]
[faq id='5851' style="3" custom_title="Example 10" description="Another example of custom colors." a_bg_color="#92dcc7" q_bg_color="#2c9b9d" qcolor="#def2f3" acolor="#2a8a8c" faq_border="1px solid #2c9b9d" icon_expand_color="#fff" icon_collapse_color="#fff"]
[faq id='5851' style="3" custom_title="Example 11" description="Custom Question colors for expanded FAQ items." container_border="1px solid #eee" faq_separator="true" margin_between_faqs="0px" icon="arrow3" icon_align='left' icon_expand_color="#364156" icon_collapse_color="#fff" q_bg_color_expanded="#a2a2a2" qcolor_expanded="#fff"]
[faq id='5851' style="3" custom_title="Example 12" description="Subtle box shadow effect added to the FAQ container." faq_box_shadow="0 10px 12px -8px #d2d2d2" icon="plus1"]
[faq id='5851' style="3" custom_title="Example 13" description="You can also combine a custom FAQ item border with a custom FAQ container border for interesting effects." a_bg_color="#ffd6c8" q_bg_color="#e8643e" qcolor="#fff2f2" acolor="#bb2d04" icon="arrow3" icon_align='left' icon_expand_color="#fff" icon_collapse_color="#fff" container_border="5px solid #e8643e" faq_border="2px #f9ad97 solid"]
[faq id='5851' style="3" custom_title="Example 14" rotate_icon="false" description="Here's another example of a custom icon, aligned to the left." icon_align='left' icon="plus2"]
[faq id='5851' style="3" custom_title="Example 15" align="center" width="600px" description="This example overrides the icon alignment and color, overall width, and centers the FAQ container." icon_align='left' icon="arrow2" icon_expand_bg_color="#fff" icon_collapse_bg_color="#fff" icon_expand_color="green" icon_collapse_color="red"]
[faq id='5851' style="3" custom_title="Example 16" rotate_icon="false" icon_align='left' icon="plus1" description="Default colors with custom icon, left aligned."]
[faq id='5851' style="3" custom_title="Example 17" width="75%" no_icon="true" description="Icons are completely optional too. Here the FAQ container width is also set to 75%. Padding for each FAQ item has been reduced too." qpadding="5px 15px 5px 15px"]
[faq id='5851' style="3" custom_title="Example 18" icon="arrow3" faq_border="2px solid #7cd3dc" description="Change the border and text color to whatever you want." qcolor="#FF5A5F" acolor="#888" icon_expand_color="#7cd3dc" icon_collapse_color="#7cd3dc" q_bg_color="#f9f9f9"]
[faq id='5851' style="3" custom_title="Example 18" icon_align="left" icon="arrow2" icon_expand_bg_color="#297373" icon_collapse_bg_color="#FF8552" icon_expand_color="#fff" icon_collapse_color="#fff"]
[faq id='5851' style="3" custom_title="Example 20" faq_border="0 solid transparent" description="Or even remove the border completely. Watch out for the spinning plus/minus icon too! :)" icon="plus2" icon_expand_bg_color="#C6AC8F" icon_collapse_bg_color="#F3DFC1"]

Troubleshooting

If you are experiencing issues here’s some information that may help.

1. Default Shortcode Not Working

The If the [faq] shortcode isn’t working then this could be caused by a conflict with another plugin that’s trying to use the same shortcode name. If so then you can use an alternative shortcode that is much less likely to cause naming conflicts.

This feature is currently awaiting finalization, and will be entered here when complete.

Still Have Questions?

We want to hear from you! If there’s any aspect of the plugin that you still need help with or have any questions or comments then please get in touch. We’re here to help. Do you think the documentation needs additional information or screenshots etc? If so you can contact us directly here.

First published October 29, 2018