Akordion

Kode HTML, CSS dan JS untuk membuat efek akordion
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Struktur HTML Akordion

Struktur Akordion

Catatan: Gandakan accordion_item sesuai kebutuhan

CSS Akordion

/*accordion*/
.accordion {
  width:100%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  overflow:hidden;	
}

.accordion_item {
  width:100%;
  background:color(1);
  color:white;
}

.accordion_icon {
	color:color(2);
}

.accordion_title {

	cursor: pointer;
	
	display: flex;
    flex-direction: row;
    
    justify-content: space-between;
	width:100%;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
   font-weight:600;
	/*border-top:1px solid #00000010;
	border-bottom:1px solid #00000010;*/
}

.accordion_content {
	display: none;
	width:100%;
}

.open .accordion_title { 
	color: #fff;
	background:color(1);
	border-radius:4px 4px 0 0;
 
}

.open .accordion_icon {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.accordion_icon, .open .accordion_icon {
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

Catatan: ganti CSS sesuai kebutuhan

Javascript Akordion

  jQuery(function() {
	var Accordion = function(el, multiple) {
		this.el = el || {};
		this.multiple = multiple || false;

		// Variables privadas
		var links = this.el.find('.accordion_title');
		// Evento
		links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
	}

      Accordion.prototype.dropdown = function(e) {
          var $el = e.data.el;
              $this = jQuery(this),
              $next = $this.next();
  
          $next.slideToggle();
          $this.parent().toggleClass('open');
  
          if (!e.data.multiple) {
              $el.find('.accordion_content').not($next).slideUp().parent().removeClass('open');
          };
      }	
  
      var accordion = new Accordion(jQuery('.accordion'), false);
    });

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait

Javascript Merubah Kecepatan Putar Video
Jika anda ingin memperlambat pemutaran video dengan tag HTML "video", bisa menggunakan kode seperti dibawah ini:
Modifikasi Tampilan Fluent Form
Menambahkan RSS Feed dari Website WordPress Lain
Kode PHP untuk menampilkan RSS Feed dari situs WordPress lainnya.
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross