Akordeon W3.CSS
Klik tombol "Buka Bagian" di bawah untuk melihat cara kerja akordeon:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
Akordeon
Akordeon digunakan untuk menampilkan (dan menyembunyikan) konten HTML.
Gunakan kelas w3-hide untuk menyembunyikan konten akordeon.
Gunakan tombol apa saja untuk membuka dan menutup konten:
Contoh
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Baik elemen yang digunakan untuk membuka akordeon dan konten akordeon dapat berupa elemen HTML apa pun.
Akordeon vs. Dropdown
Tabel ini menunjukkan perbedaan antara akordeon dan dropdown:
| Akordeon | tarik-turun |
|---|---|
| Konten mendorong konten halaman ke bawah | Konten terletak di atas konten halaman yang ada |
| Konten seringkali 100% lebar | Lebar konten 160 piksel (default) |
| Sering digunakan untuk membuka banyak bagian | Sering digunakan untuk membuka satu bagian |
akordeon
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Dropdown
Tombol Akordeon
Anda dapat menggunakan elemen HTML apa pun untuk membuka konten akordeon. Kami lebih memilih tombol dengan kelas blok-w3 , untuk menjangkau seluruh lebar halaman (lebar 100%).
Ingat bahwa tombol di W3.CSS dipusatkan secara default. Gunakan kelas w3-left-align jika Anda ingin mereka rata kiri. Namun, Anda tidak harus mengikuti pendekatan kami - akordeon akan terlihat bagus:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Contoh
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Tombol Akordeon Aktif
Gunakan JavaScript untuk menyorot akordeon yang terbuka (diklik):
Some text..
Some other text..
Contoh
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
lebar akordeon
Secara default, lebar blok adalah 100%. Untuk menimpanya, ubah properti lebar CSS dari wadah akordeon:
Some text..
Some text..
Some text..
Some text..
Contoh
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Konten Akordeon
Akordeon dengan tautan:
Contoh
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
Akordeon sebagai Daftar:
- Jill
- malam
- Adam
Contoh
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Akordeon di dalam Bilah Sisi (Anda akan mempelajari lebih lanjut tentang bilah sisi nanti):
Contoh
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
Akordeon Animasi
Gunakan salah satu kelas w3-animate- untuk memudarkan, memperbesar atau menggeser konten akordeon:
Contoh
<div id="Demo1" class="w3-hide
w3-animate-zoom">