Maksudnya adalah menampilkan dan menyembunyikan elemen dalam aplikasi dikendalikan oleh satu kelas.

Tampilkan/sembunyikan opsi kelas

toggler- elemen yang diklik (tombol, tautan, div) Jika Anda menambahkan ikon ke tombol, atur properti pointer-events ke none untuk ikon tersebut.

activeClass- kami menetapkan nama kelas yang akan ditugaskan ke elemen (tombol) yang memiliki pendengar yang melekat padanya. (js-beralih). Jika atribut yang diberikan tidak ada, nilai default dari kelas "aktif" akan ditambahkan ke elemen yang diklik.

showClass- nama kelas yang akan ditambahkan ke elemen yang ingin kita tampilkan. Nilai defaultnya adalah "tampilkan". Kita dapat mengubahnya melalui atribut data.

targets- Daftar elemen yang ingin kami tampilkan (atribut id wajib diisi)

closeElements- Daftar elemen tertentu yang ingin kami tutup. Tab, akordeon...

Tampilkan/sembunyikan logika

handler = () => {
    const closeOnly = this.toggler.hasAttribute("data-close-only");
    const openOnly = this.toggler.hasAttribute("data-open-only");

    if (closeOnly) {

      this.hide(this.targets);
      return;
    }

    this.hide(this.closeElements);

    if (openOnly) {
      this.targets.forEach((target) => this.addShowClass(target));
      this.addActiveClass(this.toggler);
      return;
    }



    // Toggle logic
    if (this.IsItShown()) {      


      this.targets.forEach((target: HTMLDivElement) => {
        const id = target.id;
        const toggler = document.querySelectorAll(
          `.js-toggle[data-target*=${id}]`
        );
        if (toggler.length) {
          toggler.forEach((button) =>
            this.removeActiveClass(button as HTMLElement)
          );
        }
      });

      this.removeActiveClass(this.toggler);

      if (this.targets) {
        this.targets.forEach((target) => this.removeShowClass(target));
      }
      return;
    }

    // Open/show elements
    this.addActiveClass(this.toggler);
    if (this.targets) {
      this.targets.forEach((target) => this.addShowClass(target));
    }
  };

this.hide(this.closeElements);- Sembunyikan semua elemen yang id-nya terdaftar (dengan mengklik satu elemen, Anda membuka elemen yang ditargetkan dan menyembunyikan elemen yang dibuka sebelumnya. Misalnya Akordeon)

openOnly- dengan mengklik elemen yang memiliki atribut ini, kami membuka semua div yang ditargetkan

Alihkan logika — Memeriksa apakah elemen target sudah ditampilkan di halaman. Jika ya, pertama-tama kita hapus kelas aktif dari elemen pemicu (semua yang memiliki kemungkinan untuk membuka div yang ditargetkan). Selanjutnya, kami menghapus kelas aktif dari elemen toggle itu sendiri. Terakhir, kami menyembunyikan elemen target.

Jika elemen target tidak ditampilkan di halaman, kami menambahkan kelas aktif ke elemen yang diklik dan elemen target.

Halaman contoh

Tautan:https://codesandbox.io/s/toggle-w1j03g

1. Akordeon — elemen pemicu memiliki efek toggle (kotak target membuka dan menutup orang lain atau dirinya sendiri)
2. Modal — tombol membuka modal dan tombol lainnya tutup saja. Perhatikan kelas modal, yang hanya memeriksa apakah overlay diklik, untuk menutup modal dalam kasus tersebut. Segala sesuatu yang lain dilakukan oleh kelas Toggle.
3. Beberapa Target — Tombol pertama dan kedua berfungsi seperti sakelar dan yang terakhir berfungsi seperti sakelar untuk keduanya
4. Dropdown — toggle dropdown sederhana
5. Tab — mirip dengan akordeon yang menunjukkan satu div target dan dekat dengan yang lain
6. Offcanvas — tautan dan tombol sebagai pemicu untuk efek hanya terbuka di luar kanvas