Blogger Accordion Eklentisi

1234567891011121314151617181920212223242526272829303132333435363738394041424344
      <div class="accordion">
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
</div>
  

12345678910111213
     <style>/*<![CDATA[*/
  .accordion .accordion-content{margin:10px 0;border-radius:4px;background:#FFF7F0;border:1px solid #FFD6B3;overflow:hidden}
  .accordion-content:nth-child(2){background-color:#F0FAFF;border-color:#CEF}
  .accordion-content:nth-child(3){background-color:#FFF0F3;border-color:#FFCCD6}
  .accordion-content:nth-child(4){background-color:#F0F0FF;border-color:#CCF}
  .accordion-content.open{padding-bottom:10px}
  .accordion-content .a-header{display:flex;min-height:50px;padding:0 15px;cursor:pointer;align-items:center;justify-content:space-between;transition:all .2s linear}
  .accordion-content.open .a-header{min-height:35px}
  .accordion-content .a-header .a-title{font-size:14px;font-weight:500;color:#333}
  .accordion-content .a-header i{font-size:15px;color:#333}
  .accordion-content .a-description{height:0;margin:0!important;font-size:12px;color:#333;font-weight:400;padding:0 15px;transition:all .2s linear}
/*]]>*/</style>
  

12
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"></link>
  

123456789101112131415161718192021222324252627282930313233
      <script>//<![CDATA[
  const accordionContent = document.querySelectorAll(".accordion-content");

  accordionContent.forEach((item, index) => {
    let header = item.querySelector(".a-header");
    header.addEventListener("click", () =>{
      item.classList.toggle("open");

      let description = item.querySelector(".a-description");
      if(item.classList.contains("open")){
        description.style.height = `${description.scrollHeight}px`;
        item.querySelector("i").classList.replace("fa-plus", "fa-minus");
      }else{
        description.style.height = "0px";
        item.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
      removeOpen(index);
    })
  })

  function removeOpen(index1){
    accordionContent.forEach((item2, index2) => {
      if(index1 != index2){
        item2.classList.remove("open");

        let des = item2.querySelector(".a-description");
        des.style.height = "0px";
        item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
    })
  }
//]]></script>