Tutorial kali akan membahas mengenai "Membuat Tab Accordion Dengan JQuery". Accordion adalah digunkan untuk mengelompokkan content ke dalam panel - panel yang terpisah di mana pengunjung dapat menutup dan membuka panel - panel tersebut. Sedangkan apa sih pengertian jquery????
jQuery adalah pustaka
JavaScript lintas-platform yang didesain untuk menyederhanakan client-side
scripting pada HTML.
jQuery
didesain untuk memudahkan dalam navigasi sebuah dokumen, pemilihan elemen DOM,
pembuatan animasi, penanganan event, dan pengembangan aplikasi berbasis Ajax.
jQuery juga menyediakan kemampuan bagi para pengembang untuk dapat membuat
plug-in pada pustaka JavaScript ini. Ini memungkinan mereka untuk membuat
abstraksi pada interaksi dan animasi tingkat-rendah, efek lanjutan, serta
tampilan widget yang dapat dimodifikasi. Pendekatan modular pada jQuery
memungkinkan kita dalam pembuatan halaman Web yang dinamis dan aplikasi
berbasis Web yang ajib.
Tujuan
dari pembuatan ini hanyalah untuk berbagi ilmu sekaligus mencari nilai kuliah
:). Mungkin coretan ini bagi pembaca yang sudah mahir dengan pemrograman web,
terbilang mudah. Akan tetapi saya yakin masih banyak pembaca yang merasa
terbantu dengan pembuatan ini. so enjoy.....
Persiapan:
Langkah- langkah yang harus
dipersiapkan:
- Buatlah folder untuk project ini, misalnya ProjectKu yang telah dibuat sebelumnya folder ProjectKu ini nantinya untuk tempat file resource halaman web kita. Sebenarnya tidak harus file resource ini dibuatkan folder, bahkan bisa diletakkan di root project kita, tapi supaya rapi sebaiknya di taruh di folder tersendiri.
- Downloadlah Jquery di https://jquery.com/download/ pilih yang versi 1.xx.xx Compressed. Versi Jquery yang saya gunakan adalah jQuery versi 1.12.2.
- Taruh file jquery hasil download tadi di dalam folder ProjeckKu. setelah itu rename file tersebut menjadi jquery.min.js supaya mudah di ingat.
- Siapkan Text/Kode Editor kesayangan anda untuk menuliskan kode yang akan kita buat nantinya. Berikut ini saya berikan beberapa pilihan Text/Kode Editor favorit saya. yaitu Atom, Sublime Text, Visual Studio Code, CodeTasty (online), Codeanywhere (online), Cloud9 IDE (online) dan Koding (online), ataupun bisa menggunakan Notepad++ bahkan Notepad sekalipun.
Pengkodean:
- Buat file 201453031.html di dalam root folder ProjectKu, kemudian isi file tersebut dengan kode di bawah ini. Pada kode tersebut telah saya berikan.
File 201453031.html:
<!--
Copyright 2016 by Nanda Aisyah Fitriani -->
<html>
<head>
<!--Title Halaman-->
<title>Tab Accordion |
201453031</title>
<!--Responsive Metadata-->
<meta name="viewport"
content="initial-scale=1, maximum-scale=1">
<!--Meload Style CSS-->
<link rel="stylesheet"
href="201453031.css">
<link rel="stylesheet"
href="defaults.css">
<!--Meload Javascript dan jQuery-->
<script
type="text/javascript"
src="jquery.min.js"></script>
<script
type="text/javascript"
src="201453031.js"></script>
</head>
<body>
<div class="main">
<!--header-->
<header>
<h1>
Example Tab Accordion with jQuery</h1>
<p> berikut ini adalah tab
accordion dengan jQuery || <a
href="#"/>Tutorial</a></p>
</header>
<!--header-->
<div class="accordion">
<div
class="accordion-section">
<a
class="accordion-section-title"
href="#accordion-1">UMK</a>
<div id="accordion-1"
class="accordion-section-content">
<p>perguruan tinggi swasta di
Kabupaten Kudus provinsi Jawa
Tengah,
Indonesia, yang berdiri pada tahun 1980 Rektor pada tahun 2004 sampai tahun
2026
adalah Prof. DR. dr. Sarjadi, Sp.PA (masuk pada periode ketiga). namun di ulang
tahun
UMK pada tahun 2013 sang rektor meninggal.</p>
</div><!--end
.accordion-section-content-->
</div><!--end
.accordion-section-->
<div
class="accordion-section">
<a
class="accordion-section-title"
href="#accordion-2">jQuery</a>
<div
id="accordion-2" class="accordion-section-content">
<p> jquery adalah pustaka JavaScript lintas-platform
yang didesain untuk menyederhanakan
client-side
scripting pada HTML.</p>
</div><!--end
.accordion-section-content-->
</div><!--end
.accordion-section-->
<div
class="accordion-section">
<a
class="accordion-section-title"
href="#accordion-3">CSS</a>
<div
id="accordion-3" class="accordion-section-content">
<p>css
adalah style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan
adanyaCSS memungkinkan kita untuk menampilkan halaman yang sama dengan format
yang berbeda.</p>
</div><!--end
.accordion-section-content-->
</div><!--end
.accordion-section-->
<div
class="accordion-section">
<a
class="accordion-section-title"
href="#accordion-4">Profilku</a>
<div
id="accordion-4" class="accordion-section-content">
<p> Nama : Nanda 'Aisyah Fitriani Kelas: A NIM : 201453031 Semester 4 Tema :
Tab Accordion</p>
</div><!--end
.accordion-section-content-->
</div><!--end
.accordion-section-->
</div><!--end .accordion-->
</div>
</body>
- </html>Buat file 201453031.css di dalam folder ProjectKu yang telah dibuat sebelumnya, kemudian isi file tersebut dengan kode di bawah ini. Pada kode tersebut telah saya berikan.
File
201453031.css:
.accordion
{
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:20px;
background:#f7f7f7;
width:50%;
}
/*-----
Section Titles -----*/
.accordion-section-title
{
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #76ff03;
background:#000000;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #827717 ;
color:#827717 ;
}
.accordion-section-title.active,
.accordion-section-title:hover {
background:#b2ff59;
/* Type */
text-decoration:none;
}
.accordion-section:last-child
.accordion-section-title {
border-bottom:none;
}
/*-----
Section Content -----*/
.accordion-section-content
{
padding:15px;
display:none;
background:#ccff90;
- }Buat file 201453031.js di dalam folder ProjectKu yang telah dibuat sebelumnya, kemudian isi file tersebut dengan kode di bawah ini. Pada kode tersebut telah saya berikan.
File
201453031.js:
jQuery(document).ready(function()
{
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion.accordion-section-content').slideUp(300).removeClass('open');
}
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion.accordion-section-title').removeClass('active');jQuery('.accordion.accordion-section-content').sideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e)
{
// Grab current anchor value
var currentAttrValue =
jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section
title
jQuery(this).addClass('active');
// Open up the hidden content
panel
jQuery('.accordion ' +
currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Menjalankan:
Jika telah selesai, maka jalankan
file 201453031.html menggunakan web browser kesayangan anda, jika benar maka
akan terlihat halaman web seperti dibawah ini.
Gambar 1. Tampilan Awal
Gambar 2. Tampilan Tab Accordion
Penutup
Mungkin itu dulu yang dapat saya bagikan kali ini. Semoga
apa yang saya bagikan ini dapat bermanfaat bagi pembaca coretan saya ini yang
mungkin masih jauh dari kata sempurna. Sebelumnya dengan penuh kerendahan hati
saya meminta maaf jika ada tulisan saya yang kurang berkenan. Terima
Kasih.
0 komentar:
Post a Comment