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">ISRAEL</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Tel Aviv University</li>
          <li>The College of Management Academic Studies (COMAS)</li>
          <li>Interdisciplinary Center Herzliya</li>
          <li>Shalem College</li>
          <li>Bar-Ilan University</li>
          <li>The Hebrew University of Jerusalem</li>
          <li>The College of Law and Business</li>
        </ul>
      </div>
    </div>

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

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">SYRIA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Al Farqad House For Publication</li>
          <li>Arab International University</li>
          <li>International University for Science and Technology (IUST)</li>
          <li>Damascus 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">TURKEY</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Bahcesehir University</li>
          <li>Izmir University of Economics</li>
          <li>KOC University</li>
          <li>Istanbul Gelisim University</li>
          <li>Sabancı University (Sabanci Universitesi)</li>
          <li>Fenerbahce University</li>
          <li>Istanbul Aydin University</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">UAE</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Ajman University</li>
          <li>University of Modern Sciences</li>
          <li>The British University in Dubai</li>
          <li>Middlesex University Dubai</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