Admin - Admin Dashboard

Title

Content

<div class="accordion-column" style="flex: 1;">
    <div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">ARGENTINA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>National University of Cordoba</li>
          <li>Universidad Torcuato Di Tella (UTDT)</li>
          <li>Austral University</li>
          <li>Universidad Nacional de La Matanza</li>
          <li>University of Belgrano</li>
          
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">BRAZIL</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Federal University of Pernambuco (The Universidade Federal De Pernambuco)</li>
          <li>Conectas Human Rights</li>
          <li>Instituto Brasil Africa</li>
          <li>Fundacao Getulio Vargas – FGV Direito Sao Paulo</li>
          <li>Fundacao Getulio Vargas- FGV Rio</li>
    <li>ESEG - Faculdade do Grupo Etapa</li>
    <li>Fundação Dom Cabral</li>
    <li>University of Campinas

</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">CHILE</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>University of Chile (UoC)</li>
          <li>Institute of International Studies at UoC</li>
          <li>Pontifical Catholic University of Valparaíso (Pontificia Universidad Catolica de Valparaiso)</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">COSTA RICA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>University for Peace</li>
          <li>Universidad Latina de Costa Rica</li>
        </ul>
      </div>
    </div>
  </div>

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

Universidad Nacional de Colombia</li>
   <li>University of Rosario </li>
   <li>Universidad Antonio Nariño</li>
   <li>Universidad Icesi

</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">URUGUAY</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Universidad Catolica del Uruguay</li>
          <li>Universidad ORT</li>
          
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">PERU</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Pontificia Universidad Católica del Perú
   <li>Universidad de Lima</li>
</li>
        </ul>
      </div>
    </div>

<div class="accordion-section">
      <div class="accordion-header">
        <h6 class="accordion-title">VENEZUELA</h6>
        <span class="accordion-icons">+</span>
      </div>
      <div class="accordion-content">
        <ul>
          <li>Universidad Católica Andres Bello</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