How to Make Seo Friendly FAQ in Blogger Post?

Learn, "How to Make Seo Friendly FAQ in Blogger Post & Pages?"

What is FAQ?

FAQ in the sense Frequently Asked Questions. In Blogging, FAQ is the major factor of SEO. Because the FAQ is most important term for building seo friendly site.

Today, I wanna tell you how to make FAQ in Blogger Post & Pages.

FAQ in Blogger

FAQ are useful when you want to toggle between hiding and showing large amount of content:

1. Add HTML

<button class="faq">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="faq">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="faq">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

2. Add CSS

/* Style the buttons that are used to open and close the faq panel */
.faq {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .faq:hover {
  background-color: #ccc;}

/* Style the faq panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;}

3. Add JavaScript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.