Cara membuat accordion resposive mudah dan simpel
Cara mebuat accordion Responsive hanya menggunakan HTML dan css,
Accordion dalam bahasa itali (Accordare ) yang berati box atau sebuah alat musik, namu bukan itu yang ingin saya bahas, tapi Accordion yang ingin saya bahas adalah Accordion HTML sebuah accordion yang biasa di gunakan para Developper di sebuah web karna accordion memiliki sifat mandiri cocok di gunakan pada situs web atupun blog, Accordion sudah ada sejak lama dan memiliki peran penting dalam membangun sebuah web, Untuk lebih jelasnya kalian bisa demo di bawah
Demo
Ok, saya anggap kalian sudah tau apa itu accordio biar nanti saya tidak terlalu betele tele menjelaskannya dan langsung sajah
Jika kalian ingin Menerapkannya pada sebuah websait kalian tinggal copasa code di bawah ini, tapi jika ingin menerapkannya pada sebuah blog kaian ikuti caranya!
Seperti biasa Kalian harus dengan posisi login di akun bloger kalian terlebih dahulu lalu masuk di bagian (Edit HTML) pada template kalian. kemudian salin code css di bawah ini dan tepelkan di atas code
Kemudian untuk HTML nya kalian bisa pasang di mana saja ,Kalian bisa menggunakanya Untuk membuat postingan atau untuk membuat sebuah menu itu terserah kalian , kalian bisa copas Codenya Di bawah ini
HTML demo nomor 1
HTML demo nomor 2
PENTING!
Pada HTML nomor 1 code yang saya beri warna biru kalian bisa memberikan nilai, misalkan kalian ingin membuat dua accordion pada satu halaman kalian tinggan kasih nilai Item1 Item2 Item3 Dan seterusnya pada masing masing accordion, kemudian untuk yang saya beri warna kalian bisa isi text atau gambar
Untuk demo nomor 2 tidak saya definisikan karna cara pemakainya sama dengan demo nomor satu , jika ada pertanyaan silahkan kalian tanyakan pada kolom komentar yang telah kami sediakan
Seperti biasa salam hangat dan terimakasi #happy
Accordion dalam bahasa itali (Accordare ) yang berati box atau sebuah alat musik, namu bukan itu yang ingin saya bahas, tapi Accordion yang ingin saya bahas adalah Accordion HTML sebuah accordion yang biasa di gunakan para Developper di sebuah web karna accordion memiliki sifat mandiri cocok di gunakan pada situs web atupun blog, Accordion sudah ada sejak lama dan memiliki peran penting dalam membangun sebuah web, Untuk lebih jelasnya kalian bisa demo di bawah
Demo
Ok, saya anggap kalian sudah tau apa itu accordio biar nanti saya tidak terlalu betele tele menjelaskannya dan langsung sajah
Jika kalian ingin Menerapkannya pada sebuah websait kalian tinggal copasa code di bawah ini, tapi jika ingin menerapkannya pada sebuah blog kaian ikuti caranya!
Seperti biasa Kalian harus dengan posisi login di akun bloger kalian terlebih dahulu lalu masuk di bagian (Edit HTML) pada template kalian. kemudian salin code css di bawah ini dan tepelkan di atas code
]]></b:skin>.accordion {
border: 1px solid white;
padding: 0 10px;
margin: 0 auto;
list-style: none outside;
}
.accordion > * + * { border-top: 1px solid white; }
.accordion-item-hd {
display: block;
padding: 15px 30px 15px 0;
position: relative;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
.accordion-item-input:checked ~ .accordion-item-bd {
max-height: 1000px;
padding-top: 15px;
margin-bottom: 15px;
-webkit-transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}
.accordion-item-input:checked ~ .accordion-item-hd > .accordion-item-hd-cta {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.accordion-item-hd-cta {
display: block;
width: 30px;
position: absolute;
top: calc(50% - 6px );
/*minus half font-size*/
right: 0;
pointer-events: none;
-webkit-transition: -webkit-transform .3s ease;
transition: transform .3s ease;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
text-align: center;
font-size: 20px;
line-height: 1;
}
.accordion-item-bd {
max-height: 0;
margin-bottom: 0;
overflow: hidden;
-webkit-transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}
.accordion-item-input {
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1;
overflow: hidden;
position: absolute;
left: -9999px;
}
Kemudian untuk HTML nya kalian bisa pasang di mana saja ,Kalian bisa menggunakanya Untuk membuat postingan atau untuk membuat sebuah menu itu terserah kalian , kalian bisa copas Codenya Di bawah ini
HTML demo nomor 1
<ul class="accordion css-accordion">
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item" />
<label for="item" class="accordion-item-hd">Demo Acordion 1 <span class="accordion-item-hd-cta">▲</span></label>
<div class="accordion-item-bd">
Text atau gambar kalian bisa taro di sini...</div>
</li>
</ul>
HTML demo nomor 2
<ul class="accordion css-accordion">
<li class="accordion-item">
<input class="accordion-item-input" type="radio" name="accordion" id="item-1" />
<label for="item-1" class="accordion-item-hd">Demo Accordion 2<span class="accordion-item-hd-cta">▲</span></label>
<div class="accordion-item-bd">Text atau gambar kalian bisa taro di sini... </div>
</li>
</ul>
PENTING!
Pada HTML nomor 1 code yang saya beri warna biru kalian bisa memberikan nilai, misalkan kalian ingin membuat dua accordion pada satu halaman kalian tinggan kasih nilai Item1 Item2 Item3 Dan seterusnya pada masing masing accordion, kemudian untuk yang saya beri warna kalian bisa isi text atau gambar
Untuk demo nomor 2 tidak saya definisikan karna cara pemakainya sama dengan demo nomor satu , jika ada pertanyaan silahkan kalian tanyakan pada kolom komentar yang telah kami sediakan
Seperti biasa salam hangat dan terimakasi #happy
