How to Add an Expand/Collapse FAQ Section in Hostinger Website Builder

Adding an expand & collapse FAQ section to your website can greatly improve user experience, making it easier for visitors to find answers without cluttering your page. In this guide, I’ll show you how to implement this feature in Hostinger Website Builder using a simple HTML code snippet.

Why Use an Expand & Collapse FAQ Section?

• Helps visitors find answers quickly
• Keeps the page clean and organized
• Enhances user experience and engagement

Step 1: Log In to Hostinger Website Builder

1. Go to Hostinger and log in.
2. Navigate to Websites and find your site.
3. Click Edit Website to open the builder.

Step 2: Add an Embed Code Element

1. Click Add Section and select Blank Section.
2. Click Add Elements, scroll down, and select Embed Code.
3. Drag and drop it into the section where you want your FAQ.

Step 3: Insert the HTML Code

1. Delete the default placeholder code.
2. Copy the HTML code :
   

<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
  }

  .faq-container {
    max-width: 800px;
    margin: 30px auto;
    background-color: #ffffff;
    padding:5px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .faq-item {
    margin-bottom: 15px;
  }

  .faq-question {
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
    background-color: #4CAF50;
    color: #fff;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }

  .faq-question:hover {
    background-color: #45a049;
  }

  .faq-answer {
    display: none;
    padding: 15px;
    background-color: #f1f1f1;
    border-left: 4px solid #4CAF50;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #333;
  }

  .faq-question:after {
    content: "➕";
    font-size: 20px;
    color: #fff;
    transition: transform 0.3s ease;
  }

  .faq-question.active:after {
    content: "➖";
  }

  .faq-answer p {
    margin: 0;
  }
</style>

<div class="faq-container">

  <div class="faq-item">
    <div class="faq-question">1st question</div>
    <div class="faq-answer"><p>answer</p></div>
  </div>
  <div class="faq-item">
    <div class="faq-question">Is Hostinger Website Builder good for SEO?</div>
    <div class="faq-answer"><p>Yes! Hostinger Website Builder offers SEO-friendly features to help your website rank on search engines.</p></div>
  </div>
  <div class="faq-item">
    <div class="faq-question">Can I add custom code to my website?</div>
    <div class="faq-answer"><p>Yes, you can add custom HTML blocks to insert additional elements or scripts.</p></div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const faqQuestions = document.querySelectorAll(".faq-question");

    faqQuestions.forEach(question => {
      question.addEventListener("click", function () {
        this.classList.toggle("active");
        const answer = this.nextElementSibling;
        answer.style.display = answer.style.display === "block" ? "none" : "block";
      });
    });
  });
</script>

1. Paste the code into the embed code box.
2. Click Embed Code to apply the changes.

Step 4: Customize Your FAQ Section

Now, you can personalize the FAQ section by editing the HTML & CSS styles.

• Change the background color: Modify the background-color property.
• Adjust padding and margins: Edit the padding and margin values for better spacing.
• Customize text and fonts: Change the font size or color of the FAQ text.
• Modify hover effects: Adjust the highlight color when users hover over a question.

Step 5: Add or Remove Questions

• To add a new FAQ item, copy an existing <div class="faq-item"> block and paste it below.
• To remove a question, delete the corresponding <div class="faq-item"> section.

Step 6: Save & Publish

1. Click Update Website to save your changes.
2. View your live website to see the expand & collapse FAQ section in action.

Final Thoughts

Adding an expand & collapse FAQ section in Hostinger Website Builder is an easy way to enhance your website’s functionality and improve user engagement. With this method, you can create a clean, professional, and interactive FAQ section in just a few minutes!

If you want more in-depth tutorials, check out my free Hostinger Website Builder course for step-by-step guidance on designing and managing your website.

📖 Get My Hostinger Course for Free: university.bensexperience.com

🚀 Need help? Leave a comment below, and I’ll be happy to assist!