Membuat DIV Lipat dengan CSS

Berikan Pengunjung Konten Tambahan Tanpa Keluar Halaman

Dengan menggunakan DIV lipat (collapsible DIV) Anda dapat menampilkan informasi tambahan di halaman yang sama. Pengguna hanya perlu mengklik judul yang diinginkan untuk melihat detailnya, sehingga tidak perlu menavigasi ke halaman lain atau menggulir panjang teks. Cara ini meningkatkan kenyamanan dan nilai referensi situs Anda.

Langkah‑Langkah Membuat DIV Lipat

1. Siapkan Struktur HTML

Letakkan elemen <div> yang berisi teks yang akan disembunyikan di dalam <body>. Setel gaya awal menjadi display:none; sehingga elemen tidak terlihat saat pertama kali halaman dimuat.

<div id="collapseContent" style="display:none;">
  <h3>Popup text<br>How does this look?</h3>
</div>

2. Tambahkan Tautan Trigger

Gunakan elemen <a> yang memanggil fungsi JavaScript saat diklik. Elemen ini berfungsi sebagai tombol “Click to Expand”.

<a href="#" onclick="toggleContent(); return false;">Click to Expand</a>

3. Tulis Fungsi JavaScript

Fungsi ini akan mengubah properti display dari <div> sehingga muncul atau tersembunyi saat tombol diklik.

<script>
function toggleContent() {
  var elem = document.getElementById('collapseContent');
  if (elem.style.display === 'none') {
    elem.style.display = 'block';
  } else {
    elem.style.display = 'none';
  }
}
</script>

Tips Praktis

Pastikan ID elemen collapseContent unik di halaman.
Anda dapat menambahkan transisi CSS untuk efek lebih halus.
Ubah teks “Click to Expand” menjadi bahasa Indonesia sesuai kebutuhan.

Kesimpulan

Dengan langkah sederhana di atas, Anda sudah dapat menambahkan DIV lipat ke situs web Anda. Metode ini mempermudah navigasi, mempercepat pencarian informasi, dan meningkatkan pengalaman pengguna secara keseluruhan.

URL:https://komputer.whycomputer.com/Internet/101307853.html

Memanggil Fungsi JavaScript dari Python: Panduan Langkah demi Langkah

Apa yang Terjadi Jika Posting Saya Diblokir di Craigslist?

Internet

Panduan Membuat Kolase Foto di Photobucket

Photobucket adalah situs web yang memudahkan pengguna komputer mengunggah dan berbagi foto digital mereka. Antarmuka yang ramah pengguna menyediakan berbagai opsi untuk mengedit dan menyimpan foto secara online. Salah satu fitur unggulan Photobucket adalah kemampuan membuat kolase scrapbook profesio

Membuat Kolom dengan Baris di Word

Membuat kolom dalam dokumen Word sangat membantu membuat newsletter atau brosur lebih menarik. Alur ini menggunakan ruang kolom yang terpisah, dan dapat menambahkan garis vertikal tipis agar tampil seperti surat kabar. Langkah 1 Simpan dokumen Anda sebelum membuat perubahan. Jika beberapa bagian me

Panduan Membuat Poster CPR

Bagaimana Cara Membuat Poster CPR Teknik penyelamatan jiwa, CPR (Cardiopulmonary Resuscitation), merayakan ulang tahun ke-50 pada tahun 2010. Menurut American Heart Association, penggunaan CPR setelah henti jantung tiba-tiba dapat menggandakan atau bahkan melipatgandakan peluang selamat korban. Post

Internet