Tabs show 1 content at a time horizontally. Accordion shows FAQ vertically - click question, answer opens, others close. Best for FAQ, reduces post length, increases SEO.

In Post #121, add FAQ accordion in Blogger.

Step 1: Add Accordion CSS + JS Once in Theme

  1. Blogger → Theme → Edit HTML
  2. Find ]]></b:skin>
  3. Paste CSS above it:
/* Accordion Post 121 */
.accordion{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin:20px 0;}
.acc-item{border-bottom:1px solid #e5e7eb;}
.acc-item:last-child{border-bottom:none;}
.acc-header{padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#fff;font-weight:bold;}
.acc-header:hover{background:#f9fafb;}
.acc-header span{font-size:20px;transition:0.2s;}
.acc-item.active .acc-header span{transform:rotate(45deg);}
.acc-content{display:none;padding:14px 16px;background:#fcfcfc;line-height:1.6;}
.acc-item.active .acc-content{display:block;}
  1. Find </body> paste JS above it:
<script>
document.addEventListener('click', function(e){
  if(e.target.closest('.acc-header')){
    var item = e.target.closest('.acc-item');
    var wasActive = item.classList.contains('active');
    document.querySelectorAll('.acc-item').forEach(i=>i.classList.remove('active'));
    if(!wasActive) item.classList.add('active');
  }
});
</script>
  1. Save theme

Step 2: Add Accordion FAQ in Post - Copy Paste in HTML Mode

<div class="accordion">
  
  <div class="acc-item active">
    <div class="acc-header">What is Blogger? <span>+</span></div>
    <div class="acc-content">Blogger is free blogging platform by Google. Free hosting, free domain blogspot.com, easy to use.</div>
  </div>

  <div class="acc-item">
    <div class="acc-header">Is Blogger free forever? <span>+</span></div>
    <div class="acc-content">Yes, Blogger is 100% free forever. No hosting fee, no domain fee if you use blogspot.com.</div>
  </div>

  <div class="acc-item">
    <div class="acc-header">Can I earn money with Blogger? <span>+</span></div>
    <div class="acc-content">Yes, with AdSense, affiliate marketing, sponsored posts. See Post #133-135 AdSense approval series.</div>
  </div>

  <div class="acc-item">
    <div class="acc-header">How to backup Blogger theme? <span>+</span></div>
    <div class="acc-content">Theme → Backup/Restore → Download. See Post #14 Backup tutorial.</div>
  </div>

  <div class="acc-item">
    <div class="acc-header">Does accordion affect SEO? <span>+</span></div>
    <div class="acc-content">No, Google reads all accordion content. FAQ accordion helps get FAQ rich snippet in Google search. Good for SEO.</div>
  </div>

</div>

Step 3: FAQ Schema for Google Rich Snippet (Important for SEO)

Add this FAQ schema in post HTML mode at bottom for Google to show your FAQs in search results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {"@type":"Question","name":"What is Blogger?","acceptedAnswer":{"@type":"Answer","text":"Blogger is free blogging platform by Google."}},
    {"@type":"Question","name":"Is Blogger free forever?","acceptedAnswer":{"@type":"Answer","text":"Yes, 100% free forever."}},
    {"@type":"Question","name":"Can I earn money with Blogger?","acceptedAnswer":{"@type":"Answer","text":"Yes with AdSense, affiliate, sponsored posts."}}
  ]
}
</script>

Step 4: Where to Use Accordion?

  • FAQ section at end of every post (Post #1-200) - helps SEO + reduces comments
  • Template download page: Installation steps as accordion
  • Product page: Features as accordion
  • Combine with Post #120 tabs: Tabs for Features/Demo/Download + Accordion for FAQ inside each tab

Post #121 Complete - You now have FAQ accordion with rich snippet.

Next Post #122 from your CSV: How to Create Table in Blogger Post - styled tables like comparison tables.