FAQ Page with Simple Dropdown Script

When your website has earned an average number of visitors everyday, a FAQ page is essential. Frequently Asked Questions or FAQ is a type of web page that lists the most frequently asked  by the site visitors or users regarding to the function of your website and services, and even provide general knowledge. It usually provides answers immediate after the questions.

The advantage of having a FAQ page is:

•  If you are the site owner/author - by referring the users/visitors to the FAQ page, you no longer need to answer the questions directly. Most of the questions you will be needing to answer are those that are not listed in the FAQ page.
• If you are the visitor/user - you no longer need to ask and wait for a response if your question is listed on the FAQ page.

Considering you already have the ideas and questions that you will be listing in the FAQ page, I will be teaching you how to make a beautiful FAQ page using a Simple Dropdown Script. Do you want an example? Click the question below:

---

What is a Simple Dropdown Script?

It is a script that is commonly use in a FAQ page. The answer or content will be shown once the question or phrase has been clicked and the answer or content will disappear once the question or phrase is clicked again.

Try clicking the question again to shrink!

*You can still add link like this: My Blog Homepage!
*You can still add banner images like this:

---

I made this tutorial for blogger only. I haven't tried it to other web hosting site but if you did make it work, please post a feed back by posting a comment below. I believe the script works for all.

STEP 1

• Go to Template
• Click Edit HTML then Proceed (Make sure to have a back-up of your template in case something had gone wrong)
• Copy then paste the code below exactly above the ]]></b:skin>
  

  .hiddenbar {display:none}
  .shownbar {display:inline}

• Copy then paste the code below exactly above the </head>

  <script src='https://sites.google.com/site/snowconescripts/dropdown.js' type='text/javascript'/>

•  Click Save Template
  

For advance users, you can download the script here and upload it to your own website.
 
Once the script is applied, STEP 2:

• Create a New Page entitled FAQ or Frequently Asked Questions
• Select Edit HTML instead of Compose as the editor
• Paste the following codes:
  

  <a title="click to expand" href="javascript:togglebar('001')">How to make a simple dropdown script for your Blogger FAQ page?</a>
  <br />
  <div class="hiddenbar" id="001">
  Answer: If you want to have a comprehensive looking FAQ page, you just need to read my tutorial<a href="http://thesnowcone.blogspot.com/2012/07/blogger-faq-page-with-simple-dropdown.html">here!</a><br /><br /></div>
  
  <a title="click to expand" href="javascript:togglebar('002')">How to make a simple dropdown script for your Blogger FAQ page?</a>
  <br />
  <div class="hiddenbar" id="002">
  Answer: If you want to have a comprehensive looking FAQ page, you just need to read my tutorial<a href="http://thesnowcone.blogspot.com/2012/07/blogger-faq-page-with-simple-dropdown.html">here!</a><br /><br /></div>

  
  Take note of the colored texts:
  

  Red and Blue - Unique ID. They should always be the same. I prefer to use a unique ID for each pages (you can also apply this format to any part of your page). Example for your FAQ page: "FAQ001" , "FAQ002", "FAQ003", and so on.
  Orange - The Question or Phrase. Indicate your question or preferred  phrase here.
  Green - The Answer or Content. Indicate the answer to your question or place the content here. You can also still use other scripts or html codes (img, span, font, and others) as long as it's still inside the <div> tag.

If you want to add some more, just paste the code again, change the ID, and edit the content. Indicate name in an orderly manner (it may be numerical or alphabetical). You can always check the "Preview" to see the result.

• Once you think you are done, you can now "Publish" your FAQ page!

---

 That's all for the tutorial! I kept it concise and informative as much as possible, now its your turn. If you followed the instructions carefully, you'll do good. Well, good luck!