Creating an FAQ Page in Bongo4U

There are multiple ways of creating a Frequently Asked Questions (FAQ) type of page in Bongo4U. This article explains each of the common methods of creating such a page.

FAQ Style

An FAQ style page is one where "Question & Answer" pairs are displayed in a list on the page. A question gets asked, and it is followed by the associated answer.

This approach can also be used to create a glossary of terms or other types of lists that have multiple sets of "a heading and an associated description."

For some FAQ pages, e.g. larger pages, the answers are initially hidden and only the questions are visible when a user first arrives on the FAQ page. When a user clicks a specific question, then the answer for that question is displayed. If the user clicks the question again, the answer is hidden, i.e. that answer's visibility is toggled by clicking the question.

Different Methods

If you don't want the answers to be initially hidden, e.g. for shorter FAQ pages, then use Method A.
If you want the answers to be initially hidden (to conserve space) and only the questions to be initially displayed, then use:

Method B (Expand/Collapse) *Recommended
Method C (More/Less Tags)
Method D (Custom HTML)

For each method, please follow the "For All Methods" instructions first, then jump to the instructions for your selected method.

For All Methods (Do This First)

These instructions assume that you are logged into the Bongo4U Admin area of your website.

First, create a new page in your website for your FAQ page. Follow the "Add a new Page to my Website" instructions to add a public or hidden page. You can use the following values when creating your new page, but feel free to customize the values to suit your needs:

Short Title: FAQ

Long Title: (leave empty)

Path (parent page): [/]

Name (for URL path): faq

Layout Template: (leave the default entry or select "* Default" if it exists in your website)

Page Type: Hidden (or Public if you want the new page to immediately be visible to the public in your website's main navigation)

(leave the remainder of the fields empty or at their default values)

Later, when you are ready to launch your new page, go back and edit the page's Page Properties and change the following two fields:

Page Type: Public

Search Engines and Robots: (*) This page is available to Search Engines

Note: We suggest creating a Hidden page so you can work on your FAQ page without it showing up in your website's navigation. Later, when you are ready to launch your FAQ page, then perform the above changes to make your hidden page visible on your website and visible to search engines.

Method A - Shorter Lists

This method will display all questions and all answers when the page is initially displayed. The answers will not be suppressed with this method. This is often used for shorter lists.

You will need to add a Definition block to your page for each "Question and Answer" pair that you will be adding. To do this, hover over or click the "Page Menu:" box or link, hover over or click the "Add to this Page..." option, and click the "Definition" entry. (not the similarly named "Definition (Expand/Collapse)" entry)

Enter your question into the "Term" field. The question should usually be no more than one line in length (i.e. not a paragraph).

Enter the associated answer into the "Definition" field. The answer can be very long. It helps to format the answer using some simple HTML tags as follows:

<p>.....insert a paragraph here.....</p>

<p>.....insert a second paragraph here.....</p>

<br /> (to add a line break to start a new line, you can add two "<br /><br />" to add a blank line)

<em>italics text</em> ("em" tag means emphasis)

<a href="https://mycompany.com/page" target="_blank">link text</a> (to create a link to another page)

Click [Save Changes]

Repeat the process for the next "Question and Answer" pair. Keep repeating the process until all of your "Question & Answer" pairs have been added.

If you wish to change the order of the Definition blocks on the page, then hover over or click the associated Block menu and use the Move Up or Move Down options to "bubble" a given block up or down on the page.

Method B - Expand/Collapse (Recommended)

This method will display all questions when the page is initially displayed, however all answers will be initially suppressed (not visible). This is often used for longer lists.

You will need to add a Definition (Expand/Collapse) block to your page for each "Question and Answer" pair that you will be adding. To do this, hover over or click the "Page Menu:" box or link, hover over or click the "Add to this Page..." option, and click the "Definition (Expand/Collapse)" entry. (not the similarly named "Definition" entry)

Enter your question into the "Term, Topic or Heading" field. The question should usually be no more than one line in length (i.e. not a paragraph).

Enter the associated answer into the "Definition or Details" field. The answer can be very long. It helps to format the answer using some simple HTML tags as follows:

<p>.....insert a paragraph here.....</p>

<p>.....insert a second paragraph here.....</p>

<br /> (to add a line break to start a new line, you can add two "<br /><br />" to add a blank line)

<em>italics text</em> ("em" tag means emphasis)

<a href="https://mycompany.com/page" target="_blank">link text</a> (to create a link to another page)

This Method B will display a link beside the "Term, Topic or Heading" (beside the question) for the user to click to display the answer. This is helpful if the user doesn't know that they need to click the question to have the answer displayed. You can enter any link text (word(s)) into the "Unhide Link Text" field. Common values that could be entered are "Details", "View", "More...", "More Info..." etc. Click the "?" beside this "Unhide Link Text" input field for more explanation.

The "Optional Anchor Tag Name" field can be used to enter a unique word for each "Question and Answer" pair which can be used later for linking to a specific question anywhere within this FAQ page. You could use "q1", "q2", "q3", ... "q15", "q16", etc.; or you could enter a word or two to represent each question or topic. If you enter multiple words, use a hyphen between each word (no spaces), e.g. "frequency", "new-mode", etc. Click the "?" beside this input field for more explanation.

After you create each pair and look at the resulting page, you will have the ability to view an answer to a given question and click the auto-generated "Link to this answer" link under the answer to see the unique URL to use to link to this specific "Question and Answer" pair within the FAQ page. This auto-generated unique link uses the value that you enter into the "Optional Anchor Tag Name" field.

Click [Save Changes]

Repeat the process for the next "Question and Answer" pair. Keep repeating the process until all of your "Question & Answer" pairs have been added.

If you wish to change the order of the blocks on the page, then hover over or click the associated Block menu and use the Move Up or Move Down options to "bubble" a given block up or down on the page.

Method C - More/Less Tags

This method lets you determine how much of each answer to initially display and where to start suppressing the remainder of each answer by inserting a "[More]" tag/link into each answer at the desired location. This lets you display the first part of answer, but still conserve space on the page.

You will first need to add a WYSIWYG block to your page (it will contain all of your "Question and Answer" pairs in this single block). To do this, hover over or click the "Page Menu:" box or link, hover over or click the "Add to this Page..." option, and click the "WYSIWYG" entry.

Enter or paste all of your "Question and Answer" pairs into this WYSIWYG block.

We suggest formatting each question as a Heading or Subhead, or if you don't want to use the Heading or Subhead format, then at least put each question on its own line and make it bold.

For each answer, make it into one or more paragraphs, inserting any images, links or other effects into each answer as desired.

Determine where to insert a "[More]" tag near the beginning of each answer. Insert the following tag at this location within the answer text:

Insert the following tag at the very end of the current answer, at the end of the last sentence (not on a new line):

You will need to use a different, unique name for each pair of tags. Use a name ("question_1" in the above example) that relates to the current question or topic. Replace any spaces with an underline ("_"). Both names in a given pair of show_more/show_less tags must be the same. However, the tag name used in each "Question and Answer" pair must be unique to that pair.

Example of Entering Questions into WYSIWYG block

What is the diameter of the Earth? <= make it a Subhead

The Earth is 12,742 km in diameter. {{bongo4u=show_more|name=earth_diameter}} The equatorial diameter of the Earth is calculated by using an ancient method of ...... etc. etc. etc. {{bongo4u=show_less|name=earth_diameter}}

How far is the Sun from the Earth? <= make it a Subhead

The Earth is on average 147.29 million km from the Sun. {{bongo4u=show_more|name=sun_distance}} Scientists sometimes call our region of space the "Goldilocks Zone" because it appears to be just right for life. As noted earlier, Earth's average distance to the Sun is about 93 million miles (150 million kilometers) from the Sun. That's 1 AU. {{bongo4u=show_less|name=sun_distance}}

The above Example when viewed in HTML mode

<h3>What is the diameter of the Earth?</h3>

<p>The Earth is 12,742 km in diameter. {{bongo4u=show_more|name=earth_diameter}} The equatorial diameter of the Earth is calculated by using an ancient method of ...... etc. etc. etc. {{bongo4u=show_less|name=earth_diameter}}</p>

<h3>How far is the Sun from the Earth?</h3>

<p>The Earth is on average 147.29 million km from the Sun. {{bongo4u=show_more|name=sun_distance}} Scientists sometimes call our region of space the "Goldilocks Zone" because it appears to be just right for life. As noted earlier, Earth's average distance to the Sun is about 93 million miles (150 million kilometers) from the Sun. That's 1 AU. {{bongo4u=show_less|name=sun_distance}}</p>

How the above Example will look to Users

What is the diameter of the Earth?

The Earth is 12,742 km in diameter. [More]

How far is the Sun from the Earth?

The Earth is on average 147.29 million km from the Sun. [More]

There are more details regarding the show_more/show_less tags, how to use them, and optional parameters to affect how they work (e.g. change the default More and Less link text), in the "More / Less Tags in WYSIWYG Blocks" article. Refer to it for more details on how to use the More/Less tags like a pro anywhere within WYSIWYG blocks.

Method D - Custom HTML

This method's output is similar to Method B, except that Method B uses a specific block but this method uses custom code within a WYSIWYG block (in HTML mode) plus a RawHTML block. This method allows more customization, however the admin user will need to be comfortable viewing and entering HTML and some Javascript & CSS code.

In your WYSIWYG block, click the [HTML] button to give you an HTML pop-up window. You might want to stretch the window's size to give you more room to work.

Enter or paste all of your "Question and Answer" pairs into this WYSIWYG block. However, you must enter each "Question and Answer" pair in HTML mode, in the following format, and using the following HTML code:

<p><button class="accordion"><strong>Insert the FAQ title or question here</strong></button></p>

<p>Insert your FAQ answer here.</p>

<p>Insert the second paragraph of your answer here.</p>

...

<p>Insert the last paragraph of your answer here.</p>

</div>

In the above code, replace "Insert the FAQ title or question here" with your question. Replace the "<p>...</p>" lines with as many paragraphs as you need for your answer. The answer can be one paragraph long or many. However, the entire answer must be contained between the "<div class="panel">" line and the "</div>" line.

Repeat the above block of code for each "Question and Answer" pair that you wish to add to this page.

Once you are done entering all of your "Question and Answer" pairs, then close your HTML pop-up window and click the [Save Changes] button to save your WYSIWYG block. You aren't done yet.

Next, you will need to add a RawHTML block to your page. To do this, hover over or click the "Page Menu:" box or link, hover over or click the "Add to this Page..." option, and click the "RawHTML" entry.

Note: The RawHTML block must be positioned below all of your "Question and Answer" pairs, i.e. below your WYSIWYG block.

To move this block, hover over the "Block: RawHTML" menu box or link, hover over or click the "Move..." option, and click the "Down" entry. Repeat this "move process" until the RawHTML block is below the "Question and Answer" WYSIWYG blocks.

Copy/Paste the following code into your RawHTML block:

var e2_acc_list = document.getElementsByClassName("accordion");

for (var i = 0; i < e2_acc_list.length; i++) {

e2_acc_list[i].onclick = function() {

this.classList.toggle("active");

var panel = this.parentNode.nextElementSibling;

if (panel.style.maxHeight){

panel.style.maxHeight = null;

} else {

panel.style.maxHeight = panel.scrollHeight + "px";

}

</script>

<style>

button.accordion {

background-color: #cecece;

color: #444;

cursor: pointer;

padding: 18px;

width: 100%;

border: none;

text-align: left;

outline: none;

font-size: 1.125em;

transition: 0.4s;

}

button.accordion.active, button.accordion:hover {background-color: #e6e6e6;}

button.accordion::after {

content: '\002B';

color: #fff;

font-weight: bold;

float: right;

margin-left: 0;

background: #b11f24;

border-radius: 3em;

text-align: center;

padding: 2px 6px 5px;

border: none;

}

button.accordion.active:after {content: "\2212";}

div.panel {

margin-top: -1em;

padding: 0 18px;

background-color: white;

max-height: 0;

overflow: hidden;

transition: max-height 0.2s ease-out;

}

</style>

and click the [Save Changes] button to save the code.

Note: By default, the above code generates a red background for the +/- expand/collapse button beside each question. You can alter the background color of the +/- button by changing the color code in section "button.accordion::after { ... background: #b11f24; ...}"

Hex color code "#b11f24" is red. You can change "#b11f24" in the above code to be any other hex color code.

Experiment

If you are unsure of which method to use, then experiment with a few methods. Create a hidden page as described above in the For All Methods section, and then add 1 or 2 test question/answer pairs using Methods A, B and C on the same hidden page. (Method D is more complicated and you might want to avoid it unless the other methods don't fulfill your needs.)