How to create an FAQ page with HTML without heavy coding?

Store Design
1

So this is not a question but a suggestion. I wanted an FAQ page that would have the answer pop up when a customer clicked on a specific question. All of the articles I found were very code heavy in languages I’m not that familiar with (CSS, Javascript, etc.). I am pretty decent at HTML so I came up with the following:

There may be better ways to do some of this as I’m no expert but it does work on both desktop and mobile.

I basically made a list of questions with headings. Each question is a hyperlink to the answer lower down on the page. When the customer clicks on the link, the question seems to just pop up in the middle of the page because I put padding between the answers. There is a back link on each answer that takes them back to the list of FAQs. The code is pretty simple although I had to look up the exact syntax and as I noted below, I “borrowed” the code for making columns. Still trying to put a space between them but no luck so far. If anyone has any questions, just drop me an email at contactus@fbombclothingcompany.com . The complete code is at the bottom ( v down there)

First you write your intro paragraph:

This is the intro paragraph. I have links to my contact us page in it. here.

Then I wanted two columns of question headings: (I borrowed this)

<!–
{
box-sizing: border-box;
}
/* Set additional styling options for the columns*/
.column {
float: left;
width: 50%;
}

.row:after {
content: “”;
display: table;
clear: both;
}
→

This uses page links and I wanted customers to be able to get back to the questions from any answer on the page so this is the link:

I put it at the top of the Questions section with no text

Then I put my first heading and the questions under it:


Shipping
 This is a heading

The How are orders shipped? … etc. are the target links to the answers down below. I just kept track (in a spreadsheet) of which answer had what number so I could match the other link to it. They aren’t in order because I added questions as I went and then went back and added more. If you planned it out you could have all the questions in order.

the

    • tags with the
    make a bulleted list of the questions and give you a line break between questions.

    The answers are linked below the questions:

    This is the target link

    ### SHIPPING ###

    This is a spacing paragraph with a title that blends into

    the background and helps keep track of the questions

    This keeps space between the questions so they come up one at

    a time on the page

    How are orders shipped?

    Copy of the original question

    Answer:
    We use a number of shippers including UPS, USPS, FedEx and DHL. Choice will depend on shipping cost and shipper availability.

    Back This link takes them back to the question list

    More padding between this question and the next one

    Here’s how the code looks all together. Feel free to copy, paste and edit for your own use.

    Note: the titles between the triple hash tags are just so I can keep track of what category that question goes to. Since there are no comments in HTML like there are in VBA (at least I couldn’t find a way to do it) I just made the text white to blend in with my site’s background. If you use a color other than white, just change the code to match. Also, I’m still building my site so it’s not up and running yet. Hopefully soon … :slightly_smiling_face:

    We know you might have some questions or concerns when it comes to doing business online and with our company. That's why we've tried to answer as many questions as we could think of ahead of time so you feel comfortable ordering from F Bomb Clothing Company. This page will be updated as new questions come in from our great customers. As always, if you don't see the answer to your question here, just drop us an email here.