How do you add an accordion to Blogger?

1. Copy HTML, CSS, JAVASCRIPT code from codebox. 2. And replace your FAQ and Answer :

HTML Code:

      
        <div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      Add here your FAQ 
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content" style="text-align: justify;">Add your FAQ's answer.
      </div>
    </div>
  </div>
  <div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      How can I read through my email to subscribers?
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content" style="text-align: justify;">Customers connect with emails and open those that sound relevant So, the first thing you need to do is understand your customer's expectations and what matters most to them. Whenever you shoot an email, ask yourself, "Is the content of the email, especially the subject line, important to my customer?" Customers are instantly engaged with emails that are personalized and when the call to action is relevant. Also, if you create an urgency, they also read and respond. Focus on the value you create for the customer and the benefits you offer.
      </div>
    </div>
  </div>
  <div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      How can I read through my email to subscribers?
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content" style="text-align: justify;">Customers connect with emails and open those that sound relevant So, the first thing you need to do is understand your customer's expectations and what matters most to them. Whenever you shoot an email, ask yourself, "Is the content of the email, especially the subject line, important to my customer?" Customers are instantly engaged with emails that are personalized and when the call to action is relevant. Also, if you create an urgency, they also read and respond. Focus on the value you create for the customer and the benefits you offer.
      </div>
    </div>
  </div>
  <div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      How can I read through my email to subscribers?
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content" style="text-align: justify;">Customers connect with emails and open those that sound relevant So, the first thing you need to do is understand your customer's expectations and what matters most to them. Whenever you shoot an email, ask yourself, "Is the content of the email, especially the subject line, important to my customer?" Customers are instantly engaged with emails that are personalized and when the call to action is relevant. Also, if you create an urgency, they also read and respond. Focus on the value you create for the customer and the benefits you offer.
      </div>
    </div>
  </div>
  <div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      How can I read through my email to subscribers?
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content" style="text-align: justify;">Customers connect with emails and open those that sound relevant So, the first thing you need to do is understand your customer's expectations and what matters most to them. Whenever you shoot an email, ask yourself, "Is the content of the email, especially the subject line, important to my customer?" Customers are instantly engaged with emails that are personalized and when the call to action is relevant. Also, if you create an urgency, they also read and respond. Focus on the value you create for the customer and the benefits you offer.
      </div>
    </div>
  </div>

CSS Code:

       
        <style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', Roboto Serif;
  background-color: #d1ccff;
  color: ;
}
h1 {
  text-align: center;
  margin: 2rem 0;
  font-size: 2.5rem;
}

.accordion {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "+";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:767px) {
  html {
    font-size: 14px;
  }
}
  
  </style>

JavaScript Code:

        <script>
  
  const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {
    
    // Uncomment in case you only want to allow for the display of only one collapsed item at a time!
    
    // const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
    // if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
    //   currentlyActiveAccordionItemHeader.classList.toggle("active");
    //   currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
    // }

    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }
    
  });
});
  </script>

1. How do I add a copy to the clipboard button in blogger ?
2. How to create countdown timer in blogger website with safe link ?

Last one thing ................ If you have any question or problem about this post or html, css, javascript code. Just a comment in comment section

【S】【u】【r】【j】【o】【l】【o】【q】

Categories