إضافة قائمة أكورديون الى مدونة بلوجر بشكل احترافي

<script>//<![CDATA[  
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  let isClicked = false; 

  header.addEventListener('click', () => {
    if (!isClicked) {
      isClicked = true; 
      const item = header.parentNode;
      const content = item.querySelector('.accordion-content');

      item.classList.add('active');
      content.style.display = 'block';
    } else {
      isClicked = false; 
      const item = header.parentNode;
      const content = item.querySelector('.accordion-content');

      item.classList.remove('active');
      content.style.display = 'none';
    }
  });
});
   //]]>
</script>

/* accordion by:https://www.wlmok-web.com */.accordion-item { border: 1px solid #ddd; border-top: 0; } .accordion-item:first-child { border-top: 1px solid #ddd; } .accordion-item p { margin: 0; } .accordion-header { padding: 15px 10px; display: flex; align-items: center; cursor: pointer; } .accordion-header::after { content: ''; display: block; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>') center no-repeat; width: 15px; height: 15px; margin-right: auto; margin-left: 10px; transition: 0.3s; } .accordion-header p { color: #2e2e2e; font-weight: 600; } .accordion-content { padding: 15px 10px; border-top: 1px solid #ddd; display: none; } .accordion-item.active .accordion-content { display: block; } .accordion-header.opened::after { transform: rotate(180deg); }.accordion-Questions { color: #fff;background: #000000;border-radius: 10px 10px 0 0;padding: 5px 10px;font-size: 1.5rem;margin: 0em 0;}

<div class="accordion-Questions"><span>أسئلة شائعة</span></div>
<div class="accordion">
  
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 1</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 2</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.
</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 3</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 4</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
</div>