Akordeon
Akordeon digunakan untuk menunjukkan (dan menyembunyikan) konten yang rusak menjadi beberapa bagian.
Klik pada "Open Section" tombol di bawah ini untuk melihat cara kerjanya:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion dengan Images:
Trolltunga, Norwegia
Kelas w3-akordeon mendefinisikan akordeon, dan kelas w3-akordeon-konten mendefinisikan bagian yang akan ditampilkan:
Contoh
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</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>Kedua elemen yang digunakan untuk membuka akordeon dan konten akordeon bisa menjadi elemen HTML.
Accordion vs Dropdown
Daftar di bawah ini menunjukkan perbedaan antara akordeon dan dropdown:
akordion
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Konten adalah 100% lebar (meliputi seluruh lebar dari elemen induk)
- Ketika dibuka, itu mendorong konten halaman bawah, jika ada (position: relative)
- Sering digunakan untuk "membuka" beberapa bagian
Tombol Accordion
Anda dapat menggunakan elemen HTML untuk membuka konten akordeon. Kami lebih memilih tombol dengan kelas w3-btn-blok, karena meliputi seluruh lebar elemen induknya, seperti konten akordeon (100% lebar). Ingat bahwa tombol di W3.CSS berpusat secara default. Menggunakan kelas w3-kiri-align jika Anda ingin mereka selaras kiri sebagai gantinya. Namun, Anda tidak harus mengikuti pendekatan kami - akordeon akan terlihat baik dengan cara baik:
Lorem ipsum ...
Lorem ipsum ...
Berpusat konten juga!
Contoh
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>Tombol Accordion aktif
Gunakan JavaScript untuk menyoroti akordion yang terbuka (diklik):
Beberapa teks ..
Beberapa teks lain ..
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", "");
}Accordion Lebar
Secara default, lebar akordeon adalah 100%. Untuk menimpa ini, mengubah properti lebar CSS wadah w3-akordeon:
Beberapa teks ..
Beberapa teks ..
Beberapa teks ..
Beberapa teks ..
Contoh
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>Accordion Konten
Accordion dengan link:
Contoh
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Accordion sebagai Card dengan daftar:
- Jill
- Malam
- Adam
Contoh
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>Accordion di dalam Sidenav(Catatan: Anda akan belajar lebih banyak tentang navigasi sisi kemudian):
Contoh
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>animasi akordion
Gunakan salah satu kelas w3-animate- memudar, zoom atau slide dalam konten akordeon: