Ngorei NexaUI

<button class="nx-collapse-btn" data-target="#collapseExample">
  Klik untuk membuka/menutup
</button>
<div class="nx-collapse" id="collapseExample">
  <div class="nx-collapse-content">
    Ini adalah konten yang dapat dibuka dan ditutup menggunakan tombol di atas.
  </div>
</div>
        

<button class="nx-collapse-btn" data-target="#multiCollapseOne">
  Toggle Pertama
</button>
<button class="nx-collapse-btn" data-target="#multiCollapseTwo">
  Toggle Kedua
</button>

<div class="nx-collapse" id="multiCollapseOne">
  <div class="nx-collapse-content">
    Konten collapse pertama
  </div>
</div>
<div class="nx-collapse" id="multiCollapseTwo">
  <div class="nx-collapse-content">
    Konten collapse kedua
  </div>
</div>
        

<div class="nx-accordion">
  <div class="nx-accordion-item">
    <button class="nx-collapse-btn" data-accordion="acc1">
      Accordion Item #1
    </button>
    <div class="nx-collapse" id="acc1">
      <div class="nx-collapse-content">
        Konten accordion pertama
      </div>
    </div>
  </div>
  
  <div class="nx-accordion-item">
    <button class="nx-collapse-btn" data-accordion="acc2">
      Accordion Item #2
    </button>
    <div class="nx-collapse" id="acc2">
      <div class="nx-collapse-content">
        Konten accordion kedua
      </div>
    </div>
  </div>
</div>
        

<button class="nx-collapse-btn" data-target="#parentCollapse">
  Parent Collapse
</button>
<div class="nx-collapse" id="parentCollapse">
  <div class="nx-collapse-content">
    <p>Konten parent collapse</p>
    
    <button class="nx-collapse-btn nx-nested-collapse" data-target="#childCollapse">
      Child Collapse
    </button>
    <div class="nx-collapse" id="childCollapse">
      <div class="nx-collapse-content">
        Konten child collapse
      </div>
    </div>
  </div>
</div>
        

<button class="nx-collapse-btn nx-primary" data-target="#primaryCollapse">
  Primary Collapse
</button>
<div class="nx-collapse" id="primaryCollapse">
  <div class="nx-collapse-content">
    Konten dengan tombol primary
  </div>
</div>

<button class="nx-collapse-btn nx-success" data-target="#successCollapse">
  Success Collapse
</button>
<div class="nx-collapse" id="successCollapse">
  <div class="nx-collapse-content">
    Konten dengan tombol success
  </div>
</div>


<button class="nx-collapse-btn" data-target="#borderedCollapse">
  Bordered Content
</button>
<div class="nx-collapse" id="borderedCollapse">
  <div class="nx-collapse-content nx-bordered">
    Konten dengan border style
  </div>
</div>

<button class="nx-collapse-btn" data-target="#shadowCollapse">
  Shadow Content
</button>
<div class="nx-collapse" id="shadowCollapse">
  <div class="nx-collapse-content nx-shadow">
    Konten dengan shadow effect
  </div>
</div>
        

<button class="nx-collapse-btn" data-target="#animatedCollapse">
  Animated Collapse
</button>
<div class="nx-collapse nx-animated" id="animatedCollapse">
  <div class="nx-collapse-content">
    Collapse ini memiliki efek animasi saat dibuka dan ditutup
  </div>
</div>
        

<button class="nx-collapse-btn" data-target="#eventCollapse">
  Collapse dengan Events
</button>
<div class="nx-collapse" id="eventCollapse">
  <div class="nx-collapse-content">
    Collapse ini memiliki event handlers
  </div>
</div>
<div id="eventLog"></div>

<script>
document.querySelector('#eventCollapse').addEventListener('show.nx-collapse', function() {
  document.querySelector('#eventLog').textContent = 'Collapse sedang dibuka';
});

document.querySelector('#eventCollapse').addEventListener('hide.nx-collapse', function() {
  document.querySelector('#eventLog').textContent = 'Collapse sedang ditutup';
});
</script>
        

// Inisialisasi
const collapse = document.querySelector('#myCollapse');

// Menggunakan methods
collapse.show();    // Membuka collapse
collapse.hide();    // Menutup collapse
collapse.toggle();  // Toggle collapse

// Mendengarkan events
collapse.addEventListener('show.nx-collapse', function(e) {
  // Kode yang dijalankan sebelum collapse dibuka
  console.log('Collapse akan dibuka');
});

collapse.addEventListener('shown.nx-collapse', function(e) {
  // Kode yang dijalankan setelah collapse dibuka
  console.log('Collapse telah dibuka');
});

collapse.addEventListener('hide.nx-collapse', function(e) {
  // Kode yang dijalankan sebelum collapse ditutup
  console.log('Collapse akan ditutup');
});

collapse.addEventListener('hidden.nx-collapse', function(e) {
  // Kode yang dijalankan setelah collapse ditutup
  console.log('Collapse telah ditutup');
});

// Opsi konfigurasi
const collapseOptions = {
  toggle: true,      // Otomatis toggle saat inisialisasi
  parent: null,      // Element parent untuk accordion
  duration: 350      // Durasi animasi dalam milidetik
};

// Inisialisasi dengan opsi
new NXCollapse(collapse, collapseOptions);