Blogger Add Show Hide FAQ Style Toggle Contents

To have a Frequently Asked Question FAQ page at your blog can be useful for you (& your blog),  when dealing with repeatative queries asked by your blog readers.

Some call FAQ pages as a Question & Answer page, where blog owners can easily point users to this page if similar questions asked online.

To create one on a Blogger blog post can be challenging, the Blogger blog post editor does not have a built in show & hide feature or auto create markups to toggle expand or collapse contents.

By using this technique, you do not rely on 3rd party apps or services to create one. You only add, edit, style your contents anytime, just by editing the Posts/Pages where you've published them -- using the existing blog editor tool!

However, the post editor does have an HTML view where users can add their own markups to create these show & hide content elements just like an FAQ or Q&A type styling.

How to Create FAQ Toggle Show Hide Contents using Blogger Unordered List

1. First assign an unordered list to your Question and Answer texts by its own group. It is easy to assign them just by highlighting the question & answer texts, then click the Unordered List button. Below are FAQ examples using Blogger unordered lists. To test, click the Q1, Q2 ... texts below to expand more its contents 🤗.

• Q1: How to create show hide FAQ on Blogger?
• A1: Just follow this blog post step-by-step guide on how to create one easily using Blogger editor tool.

• Q2: Do I need to edit markups when more FAQ is added?
• A2.1: No you don't. You can add as many FAQ just as long you've grouped them into an unordered list group.
• A2.2: It is super duper easy.
• A2.3: No additional coding needed!

• Q3: Can I add more Q&A toggle expand groups?
• A3: Yes you can! Just assign each Q&A into an unordered list, where the first list will be your question to display & the list below them will be the answers hidden, appeared when the question is toggled.

• Q4: Can I style the texts in each line of the grouped list?
• A4: Yes you can! Highlight the texts then click the text styling icon available at your blog editor. Example here showing the Question texts was assigned with the bold styling.

• Q5: Tried this but it did not work!
• A5.1: Check your unordered list html markup, see if it may be malformed when assigned in Compose mode. Then check your addition codes, it should be at the very bottom.
• A5.2: Still not working? Use the comment form below to discuss, we're always online to help out anyways 🤗.

More examples on how to style this show hide feature can be viewed here: https://www.galeriartie.com/p/faq.html

2. The markup for the unordered list added by Blogger post editor when viewed in post HTML mode will look something like this...

<ul>
  <li>Text for question 1</li>
  <li>Hidden show hide contents for question 1</li>
</ul>

<ul>
  <li>Text for question 2</li>
  <li>Hidden show hide contents for question 2</li>
</ul>

3. Make sure that the first <li> will contain your question texts. Then the next <li> after will contain your show/ hide contents.

4. Copy the markups below & paste them at the very bottom of your post contents in HTML View...

<style>
.post-body ul {
  margin:0 0 1em;
  padding: 0;
  list-style:none;
}
.post-body ul>li {
  margin:0;
  padding:0;
  display: none;
}  
.post-body ul li {
  display:none;
}
.post-body ul.show>li {
  display: block!important;
}
.post-body ul>li:first-child {
  display: block;
}
</style>

<script>
var button = document.querySelectorAll('.post-body ul>li:first-child');
button.forEach(function(li) {
  li.addEventListener('click', function (event) {
    var ul = this.parentNode;
    var contents = this.nextElementSibling;
    if (contents.style.display == "") {
      contents.style.display = "block";
      ul.classList.add("show");
    } else {
      contents.style.display = "";
      ul.classList.remove("show");
    }
  });
});
</script>

The first part inside <style> tag will style the Unordered List texts. Use this to style the FAQ lists to your liking.

The second part inside <script> tag is the functions for the show hide toggle content triggers. No changes required here, unless, if you want to make your FAQ click action display more interesting.

5. Now click Compose View, then click Publish when ready.

6. View your blog post, you should see the very first line of your unordered list aka the question, while the other lines in the unordered list, in its group, will be hidden. When the question is clicked the hidden contents will be shown.

7. You can add/edit more FAQ questions & answers in your posts using the same unordered styling as per #1 and #2, meaning you do not need to edit codes or add markups in the future.

8. The markups at #4 should always be at the very bottom of your post contents for the styling & click trigger to work.

This is just basics, a proof of concept, how to utilize existing Blogger post styling features to create a clickable show & hide FAQ Q&A styled contents with minimal coding & re-usable to expand more contents in the future -- if you want to!