Admin - Admin Dashboard

Title

Content

<div class="accordion-container" style="display: flex; gap: 20px; flex-wrap: wrap;">
  
  <div class="accordion-column" style="flex: 1;">
    <div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">MOZAMBIQUE</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>The Crianca Nosso Futuro Institute</li>
University of St. Thomas of Mozambique (USTM)
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">LIBERIA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>University of Liberia</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">UGANDA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Makerere University</li>
        </ul>
      </div>
    </div>
  </div>

<div class="accordion-column" style="flex: 1;">
    <div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">KENYA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>University of Eldoret</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">SOUTH AFRICA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
       <li> African Leadership Academy</li>
<li>University of South Africa</li>
<li>University of Capetown</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">NIGERIA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
    <li>AFE Babalola University</li>
        </ul>
      </div>
    </div>

</div>
</div>

allHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const section = header.parentElement;
    const content = header.nextElementSibling;
    const isActive = section.classList.contains('active');

// Close all sections
    document.querySelectorAll('.accordion-section.active').forEach(activeSection => {
      activeSection.classList.remove('active');
      activeSection.querySelector('.accordion-content').style.maxHeight = '0';
      activeSection.querySelector('.accordion-icons').textContent = '+';
    });

// Toggle current section
    if (!isActive) {
      section.classList.add('active');
      content.style.maxHeight = content.scrollHeight + "px";
     section.querySelector('.accordion-icons').textContent = '-';
    }
  });
});

// Set initial open section max-height
document.querySelectorAll('.accordion-section.active .accordion-content').forEach(content => {
  content.style.maxHeight = content.scrollHeight + "px";
});
</script>

Sidebar Type

Image

Edit Page