Ditulis oleh: Ditulis pada: 4/01/2021
Multi Accordion dengan CSS Saja - Sebenarnya di AMP HTML sudah ada amp-accordion, tetapi hanya untuk accordion tunggal. Maksudnya, saya ingin menggunakan beberapa accordion dan ketika diklik dapat membuka sekaligus menutup accordion lainnya yang terbuka.
Dulu saya pernah membuat toggle multi div, namun itu menggunakan jquery dan saya inginnya hanya menggunakan CSS saja agar bisa digunakan di AMP ataupun NON AMP.
Kemudian saya kepikiran untuk memodifikasi dropdown dari menu CSS saja untuk dijadikan accordion dengan sedikit penyesuaian tentunya.
Saya sebut ini dengan multi accordion dengan accordion pertama sudah terbuka dan tentunya tanpa javascript atau jquery. Untuk demonya bisa cek di JSFiddle berikut ini.
Jika Anda ingin mencobanya, silahkan gunakan kode-kode berikut ini.
Copy kode CSS berikut dan simpan di style blog Anda.
.kompi-accordion {
width: 100%;
}
.kompi-accordion .kompiaccordion {
position: relative;
display: block;
margin: 0;
}
.kompi-accordion .kompiaccordion input {
position: absolute;
opacity: 0;
z-index: -1;
}
.kompi-accordion .kompiaccordion .btn-accordion {
display: block;
height: 40px;
text-align: left;
padding: 0 10px;
margin-bottom: 5px;
border: 0;
background: #555;
color: #fff;
font-weight: 700;
font-size: 16px;
font-family: Arial,Helvetica,sans-serif;
line-height: 40px;
cursor: pointer;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kompi-accordion .kompiaccordion .btn-accordion:hover {
background: #333;
}
.kompi-accordion .kompiaccordion .btn-accordion:focus,
.kompi-accordion .kompiaccordion .btn-accordion:active {
outline: none;
}
.kompi-accordion .kompiaccordion input:checked ~ .btn-accordion {
background: #111;
}
.kompi-accordion .kompiaccordion .btn-accordion .arrow {
float: right;
width: 24px;
height: 40px;
}
.kompi-accordion .kompiaccordion input:checked ~ .btn-accordion .arrow {
transform: rotate(180deg);
}
.kompi-accordion .kompiaccordion .btn-accordion .arrow path {
fill: #fff;
}
.kompi-accordion .kompiaccordion .content {
width: 100%;
padding: 0;
margin: 5px 0;
display: none;
}
.kompi-accordion .kompiaccordion .content p {
margin: 5px 0;
padding: 0;
color: #555;
}
.kompi-accordion .kompiaccordion input:checked ~ .content {
display: block;
pointer-events: all;
visibility: visible;
}
.kompi-accordion .kompiaccordion .content .youtube-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin: -5px 0 0;
}
.kompi-accordion .kompiaccordion .content .youtube-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
Kemudian untuk menampilkan accordion, gunakan kode HTML berikut.
<div class="kompi-accordion">
<div class="kompiaccordion">
<input type="radio" id="cek1" name="cek" checked=""/>
<label for="cek1" class="btn-accordion">Accordion 1<svg class="arrow" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis lacinia diam. Etiam et mauris vehicula, tempus lectus et, vestibulum lorem. Nam ullamcorper luctus massa, in interdum ante rhoncus vel. Duis dignissim auctor dolor, sit amet consequat odio efficitur vulputate. Aenean sed sapien et justo sodales dapibus.</p>
</div>
</div>
<div class="kompiaccordion">
<input type="radio" id="cek2" name="cek"/>
<label for="cek2" class="btn-accordion">Accordion 2<svg class="arrow" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis lacinia diam. Etiam et mauris vehicula, tempus lectus et, vestibulum lorem. Nam ullamcorper luctus massa, in interdum ante rhoncus vel. Duis dignissim auctor dolor, sit amet consequat odio efficitur vulputate. Aenean sed sapien et justo sodales dapibus.</p>
</div>
</div>
<div class="kompiaccordion">
<input type="radio" id="cek3" name="cek"/>
<label for="cek3" class="btn-accordion">Accordion 3<svg class="arrow" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis lacinia diam. Etiam et mauris vehicula, tempus lectus et, vestibulum lorem. Nam ullamcorper luctus massa, in interdum ante rhoncus vel. Duis dignissim auctor dolor, sit amet consequat odio efficitur vulputate. Aenean sed sapien et justo sodales dapibus.</p>
</div>
</div>
</div>Perhatikan kode-kode yang ditandai, sesuaikan dengan urutan dan jumlah accordion yang ditampilkan.
Jika ingin menampilkan video Youtube di dalam accordion, gunakan kode berikut agar videonya responsive. Simpan di dalam tag <div class="content"> dan berikut demo dengan video Youtube.
<div class="youtube-responsive">
<iframe width="560" height="315" src="https://youtube.com/embed/videoseries?list=PLXkJdoU2VsqkttzvHdQIY-a9waGGJ4xGz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>Sesuaikan URL embed video Youtube pada kode yang ditandai.
Inti dari postingan ini, cobalah membuat sesuatu yang lain dari kode-kode yang sudah ada, itung-itung latihan dalam memahami CSS dan HTML, jangan hanya copy paste begitu saja. Coba saja modifikasi tampilan accordion di atas, misalnya untuk warna dan bentuk tombolnya atau modif bagian content, dan lainnya.
Sekian, semoga bermanfaat.