إنضم لنا

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 ]]></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">&#9650;</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">&#9650;</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

Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail