Amaç, uygulamadaki öğelerin gösterilmesi ve gizlenmesinin tek bir sınıf tarafından kontrol edilmesidir.

Sınıf seçeneklerini göster/gizle

toggler- tıklanan öğe (düğme, bağlantı, div) Düğmeye bir simge eklerseniz, simge için pointer-events özelliğini hiçbiri olarak ayarlayın.

activeClass- kendisine eklenmiş bir dinleyici bulunan öğeye (düğme) atanacak sınıfın adını atarız. (js geçiş). Belirtilen öznitelik mevcut değilse, tıklanan öğeye "etkin" sınıfın varsayılan değeri eklenecektir.

showClass- görüntülemek istediğimiz öğeye eklenecek bir sınıf adı. Varsayılan değer "göster"dir. Data özniteliği aracılığıyla değiştirebiliriz.

targets- Göstermek istediğimiz öğelerin listesi (id özelliği zorunludur)

closeElements- Kapatmak istediğimiz belirli öğelerin listesi. Tab, akordeon...

Mantığı göster/gizle

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);- Kimlikleri listelenen tüm öğeleri gizleyin (bir öğeye tıklayarak hedeflenen öğeyi açar ve daha önce açılanları gizlersiniz. Örneğin Akordeon)

openOnly- bu özelliğe sahip bir öğeye tıklayarak, hedeflenen tüm div'leri açarız

Geçiş mantığı — Hedef öğelerin sayfada zaten gösterilip gösterilmediğini kontrol etme. Öyleyse, önce aktif sınıfı tetikleyici öğelerden kaldırırız (hedeflenen div'i açma olanağına sahip olanların tümü). Ardından, aktif sınıfı toggle öğesinin kendisinden kaldırıyoruz. Son olarak hedef elemanları saklıyoruz.

Hedef elemanlar sayfada görüntülenmiyorsa aktif sınıfı hem tıklanan elemana hem de hedef elemanlara ekliyoruz.

örnek sayfa

Bağlantı:https://codesandbox.io/s/toggle-w1j03g

1. Akordeon — tetik öğesinin değiştirme etkisi vardır (hedef kutusu diğerlerini veya kendisini açar ve kapatır)
2. Modal — düğmesi modu açar ve diğer düğmeler hemen kapanır. Bu durumda kipi kapatmak için yalnızca yer paylaşımının tıklanıp tıklanmadığını kontrol eden kip sınıfına dikkat edin. Diğer her şey Toggle sınıfı tarafından yapılır.
3. Çoklu Hedefler — Birinci ve ikinci düğme geçiş gibi çalışır ve sonuncusu her ikisi için de geçiş işlevi görür
4. Açılır liste — basit açılır menü geçişi
5. Sekme — akordeon'a benzer, biri bir hedef div gösterir ve diğerlerine yakındır
6. Offcanvas — tuval dışı yalnızca açık efekti için tetikleyiciler olarak bağlantı ve düğme