(TEST without media video embed) FAQ Style 3 (Template 1)

This page displays FAQs for Style 3 and features several examples of how it can be further customised via the powerful built-in settings.

---

[faq id=’5853′ style=”3″ custom_title=”Example 1″ description=”Default settings for style 3.”]
[faq id=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ style=”3″ custom_title=”Example 16″ rotate_icon=”false” icon_align=’left’ icon=”plus1″ description=”Default colors with custom icon, left aligned.”]
[faq id=’5853′ 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=’5853′ 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″]

Example 19

Layout your FAQs in columns too. Try resizing your browser window to see responsive behavior.

[faq id=’5853′ 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″]

This page displays FAQs for Style 3 and features several examples of how it can be further customised via the powerful built-in settings.

---

[faq id=’5853′ style=”3″ custom_title=”Example 1″ description=”Default settings for style 3.”]
[faq id=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ style=”3″ custom_title=”Example 16″ rotate_icon=”false” icon_align=’left’ icon=”plus1″ description=”Default colors with custom icon, left aligned.”]
[faq id=’5853′ 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=’5853′ 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″]

Example 19

Layout your FAQs in columns too. Try resizing your browser window to see responsive behavior.

[faq id=’5853′ 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″]

This page displays FAQs for Style 3 and features several examples of how it can be further customised via the powerful built-in settings.

---

[faq id=’5853′ style=”3″ custom_title=”Example 1″ description=”Default settings for style 3.”]
[faq id=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ 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=’5853′ style=”3″ custom_title=”Example 16″ rotate_icon=”false” icon_align=’left’ icon=”plus1″ description=”Default colors with custom icon, left aligned.”]
[faq id=’5853′ 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=’5853′ 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″]

Example 19

Layout your FAQs in columns too. Try resizing your browser window to see responsive behavior.

[faq id=’5853′ 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″]