Akordion ringkas tanpa JavaScript

Artikel ini pada asalnya diterbitkan di Rails Designer

Bukan satu rahsia lagi bahawa HTML dan CSS telah menjadi lebih baik selama ini. Dan sementara saya telah menjadi gemar menulis JavaScript, bila-bila masa saya dapat melepaskannya, saya melakukannya.

Salah satu perkara yang tidak memerlukan JavaScript ialah akordion biasa. Ia adalah jenis komponen yang mudah dibuat dengan rangka kerja JS seperti Vue, Alpine dan Stimulus, tetapi untuk versi paling asas anda tidak memerlukan mana-mana daripadanya. Dan untuk menjadikannya kelihatan baik, anda hanya perlukan CSS.

Contoh ini ialah yang saya mahukan. Anda lihat ia tidak semestinya gaya senarai FAQ biasa. Menggunakannya untuk bahagian seperti ini, juga berfungsi dengan baik.

Artikel ini berasal dari:

• asasnya;
• untuk menambah minat visual;
• untuk menyejukkan peningkatan progresif untuk menggunakan ciri Rangsangan lanjutan yang kurang dikenali.

Asasnya

Versi paling asas, kelihatan seperti ini:

<details>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details>
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

Dan beginilah rupanya:

Lihat artikel asal untuk contoh langsung. ?

Ia bukan yang paling cantik, tetapi ia berkesan!

Atribut butiran/ringkasan

Terdapat beberapa helah menarik yang terdapat pada butiran/elemen ringkasan.

• terbuka-atribut; anda boleh menetapkan atribut ini untuk membuka satu atau banyak elemen secara lalai (ia juga digunakan untuk CSS di bawah);
• tambah nama-atribut; ini membenarkan hanya satu butiran-elemen dibuka. Apabila anda membuka satu, semua yang lain ditutup secara automatik.

<details name="more" open>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details name="more">
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

Lihat:

Lihat artikel asal untuk contoh langsung. ?

Menambahkan lagi minat visual

Pilihan lalai tidak kelihatan terlalu bagus, jadi mari tambahkan beberapa CSS untuk menjadikan perkara lebih selaras dengan apl anda. Bahagian utama ialah:

• [&::-webkit-details-marker]:hidden; ini akan menyembunyikan chevron lalai;
• kumpulan-terbuka/perincian:putar-180; ini memutarkan ikon chevron tersuai berdasarkan keadaannya.

Versi penuh dengan Tailwind CSS akan kelihatan seperti ini:

<details>



<p>This is how it looks:</p>

<blockquote>
<p>View the original article to live examples. ?</p>
</blockquote>

<h2>
  
  
  Progressive enhancements
</h2>

<p>A <strong>toggle</strong> event is dispatched on the <strong>details</strong>-element whenever it state changes. So you could listen for it like this:<br>
</p>

<pre class="brush:php;toolbar:false">details.addEventListener("toggle", (event) => {
  if (details.open) {
    // Do something
  } else {
    // Do something else
  }
});

Apa yang anda boleh gunakan ini? Sebagai contoh, simpan keadaan dalam elemen butiran dalam localStorage penyemak imbas supaya ia berterusan sepanjang masa. Mari lihat dengan pengawal Rangsangan kecil:

// app/javascript/controllers/accordion_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.open = localStorage.getItem(this.element.id) === "open";

    this.#attachEventListeners();
  }

  // private

  #attachEventListeners() {
    this.element.addEventListener("toggle", (event) => {
      if (this.element.open) {
        localStorage.setItem(this.element.id, "open");
      } else {
        localStorage.removeItem(this.element.id);
      }
    });
  }
}

Perlu contoh lain? Gaya senarai FAQ biasa boleh dilihat pada halaman harga.

Begitulah mudahnya untuk menambah akordion dengan HTML biasa. Anda boleh bermula dengan sangat mudah, kemudian tambahkan minat visual dengan CSS dan tambahkannya dengan beberapa peningkatan progresif dengan pengawal Rangsangan yang ringkas.

Atas ialah kandungan terperinci Akordion ringkas tanpa JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!