Jika sedang mencari tips tentang bagaimana cara sembunyikan dan perlihatkan isi paragraf dengan CSS tanpa JavaScript maka Anda telah berkunjung ke halaman web yang benar. Cara ini bermanfaat bagi pengunjung yang datang agar bisa melihat seluruh judul daftar, dengan menyembunyikan isinya.
Dengan menyembunyikan isi paragraf dalam daftar maka pembaca akan bisa menghemat banyak waktu ketika mencari topik tertentu dari judul pada daftar yang ada. Semakin banyak topik dalam daftar akan semakin bermanfaat dan semakin menghemat waktu bagi pengunjung. Ini juga bermanfaat agar judul topik tidak tenggelam oleh isi daftar yang panjang.
Tips ini bisa dipakai ketika Anda membuat sebuah artikel yang berisi, misalnya, daftar tanya jawab dengan topik cukup banyak, seperti di tulisan Tanya Jawab Tentang COVID-19 yang terbit beberapa saat sebelum tulisan ini dibuat. Isi jawabannya disembunyikan, dan baru diperlihatkan ketika judul topiknya diklik, dan tersembunyi ketika diklik lagi.
Contoh lain adalah laman Sitemap yang berisi daftar panjang travelog dan artikel lainnya yang ditata berdasarkan lokasi dan nama provinsi. Jika isi daftar tidak disembunyikan, maka halaman akan menjadi sangat panjang, dan pembaca harus scroll ke bawah beberapa kali untuk bisa menemukan judul yang mereka cari. Ini tentu bisa menjengkelkan.
Cara yang digunakan di sini adalah murni menggunakan CSS dan sama sekali tidak memakai JavaScript, yang membuat beban halaman menjadi ringan. Sebagaimana kita tahu, adanya JavaScript betapa pun kecilnya akan memperlambat pembukaan laman web, walaupuh sudah diasinkronisasi sekalipun.
Ada sejumlah cara untuk menyembunyikan dan memperlihatkan isi daftar dengan CSS tanpa JavaScript, namun tulisan ini hanya menyajikan dua diantara cara itu. Semakin banyak pilihan kadang malahan bisa membuat semakin bingung untuk memilih yang mana.
Cara yang pertama adalah sebagai berikut:
CSS
HTML / Di Artikel
Ketika digunakan (klik judul di bawah ini):
Coronavirus adalah kelompok virus yang dapat menyebabkan penyakit pada hewan atau manusia. Beberapa jenis Coronavirus menjadi penyebab penyakit flu ringan hingga yang parah seperti Middle East Respiratory Syndrome (MERS), Severe Acute Respiratory Syndrome (SARS), dan terakhir COVID-19.
Cara yang kedua jauh lebih sederhana, bahkan tanpa perlu menambahkan CSS. Menggunakan contoh di atas maka scriptnya adalah sebagai berikut:
Ketika digunakan:
Jika ada dua tingkat atau lebih judul topik, maka gunakan cara sebagai berikut:
Ketika digunakan:
Demikian tips tentang bagaimana cara sembunyikan dan perlihatkan isi paragraf dengan CSS tanpa memakai JavaScript. Semoga bermanfaat. Sumber: stackoverflow.com.
Dengan menyembunyikan isi paragraf dalam daftar maka pembaca akan bisa menghemat banyak waktu ketika mencari topik tertentu dari judul pada daftar yang ada. Semakin banyak topik dalam daftar akan semakin bermanfaat dan semakin menghemat waktu bagi pengunjung. Ini juga bermanfaat agar judul topik tidak tenggelam oleh isi daftar yang panjang.
Tips ini bisa dipakai ketika Anda membuat sebuah artikel yang berisi, misalnya, daftar tanya jawab dengan topik cukup banyak, seperti di tulisan Tanya Jawab Tentang COVID-19 yang terbit beberapa saat sebelum tulisan ini dibuat. Isi jawabannya disembunyikan, dan baru diperlihatkan ketika judul topiknya diklik, dan tersembunyi ketika diklik lagi.
Contoh lain adalah laman Sitemap yang berisi daftar panjang travelog dan artikel lainnya yang ditata berdasarkan lokasi dan nama provinsi. Jika isi daftar tidak disembunyikan, maka halaman akan menjadi sangat panjang, dan pembaca harus scroll ke bawah beberapa kali untuk bisa menemukan judul yang mereka cari. Ini tentu bisa menjengkelkan.
Cara yang digunakan di sini adalah murni menggunakan CSS dan sama sekali tidak memakai JavaScript, yang membuat beban halaman menjadi ringan. Sebagaimana kita tahu, adanya JavaScript betapa pun kecilnya akan memperlambat pembukaan laman web, walaupuh sudah diasinkronisasi sekalipun.
Ada sejumlah cara untuk menyembunyikan dan memperlihatkan isi daftar dengan CSS tanpa JavaScript, namun tulisan ini hanya menyajikan dua diantara cara itu. Semakin banyak pilihan kadang malahan bisa membuat semakin bingung untuk memilih yang mana.
Cara yang pertama adalah sebagai berikut:
CSS
#show,#content{display:none;}
#show:checked~#content{display:block;}HTML / Di Artikel
<input type=checkbox id="show">
<label for="show">Apa itu coronavirus?</label>
<span id="content">Coronavirus adalah kelompok virus yang dapat menyebabkan penyakit pada hewan atau manusia. Beberapa jenis Coronavirus menjadi penyebab penyakit flu ringan hingga yang parah seperti Middle East Respiratory Syndrome (MERS), Severe Acute Respiratory Syndrome (SARS), dan terakhir COVID-19.</span>Ketika digunakan (klik judul di bawah ini):
Coronavirus adalah kelompok virus yang dapat menyebabkan penyakit pada hewan atau manusia. Beberapa jenis Coronavirus menjadi penyebab penyakit flu ringan hingga yang parah seperti Middle East Respiratory Syndrome (MERS), Severe Acute Respiratory Syndrome (SARS), dan terakhir COVID-19.
Cara yang kedua jauh lebih sederhana, bahkan tanpa perlu menambahkan CSS. Menggunakan contoh di atas maka scriptnya adalah sebagai berikut:
<details><summary><b>Apa itu coronavirus?</b></summary>Coronavirus adalah kelompok virus yang dapat menyebabkan penyakit pada hewan atau manusia. Beberapa jenis Coronavirus menjadi penyebab penyakit flu ringan hingga yang parah seperti Middle East Respiratory Syndrome (MERS), Severe Acute Respiratory Syndrome (SARS), dan terakhir COVID-19.</details>Ketika digunakan:
Apa itu coronavirus?
Coronavirus adalah kelompok virus yang dapat menyebabkan penyakit pada hewan atau manusia. Beberapa jenis Coronavirus menjadi penyebab penyakit flu ringan hingga yang parah seperti Middle East Respiratory Syndrome (MERS), Severe Acute Respiratory Syndrome (SARS), dan terakhir COVID-19.Jika ada dua tingkat atau lebih judul topik, maka gunakan cara sebagai berikut:
<details><summary>Pengetahuan Dasar COVID-19</summary><details><summary><b>Apa itu coronavirus?</b></summary>Coronavirus adalah kelompok virus yang dapat menyebabkan penyakit pada hewan atau manusia. Beberapa jenis Coronavirus menjadi penyebab penyakit flu ringan hingga yang parah seperti Middle East Respiratory Syndrome (MERS), Severe Acute Respiratory Syndrome (SARS), dan terakhir COVID-19.</details><details><summary><b>Apa itu COVID-19?</b></summary>COVID-19 adalah penyakit menular yang disebabkan virus SARS-COV2. Virus dan penyakit ini baru diketahui setelah wabah di Wuhan, China, pada Desember 2019.</details></details>Ketika digunakan:
Pengetahuan Dasar COVID-19
Apa itu coronavirus?
Coronavirus adalah kelompok virus yang dapat menyebabkan penyakit pada hewan atau manusia. Beberapa jenis Coronavirus menjadi penyebab penyakit flu ringan hingga yang parah seperti Middle East Respiratory Syndrome (MERS), Severe Acute Respiratory Syndrome (SARS), dan terakhir COVID-19.Apa itu COVID-19?
COVID-19 adalah penyakit menular yang disebabkan virus SARS-COV2. Virus dan penyakit ini baru diketahui setelah wabah di Wuhan, China, pada Desember 2019.Lihat Video
Demikian tips tentang bagaimana cara sembunyikan dan perlihatkan isi paragraf dengan CSS tanpa memakai JavaScript. Semoga bermanfaat. Sumber: stackoverflow.com.
Sponsored Link
Sponsored Link
Sponsored Link
Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.