User hari ini : 373 
User Online: 18Simple Responsive Jquery Accordion
Publish Date : 02-07-2017 , dibaca 3978 kali, Hari ini dibaca : 1 kali ,0 comments
Tutorial kali ini admin akan membuat responsive accordion dengan Jquery , Accordion dapat berupa menu atau content yang mempunyai efek susun, di dalam menu website atau blog accordion biasa dibuat untuk menampilkan sub-sub menu di dalamnya, accordion content biasanya berada di dalam content / tab, sesuai dengan kebutuhan pengguna, biasanya dibuat untuk menampilkan informasi atau penjelasan dari judul besarnya.. So sebenarnya accordion merupakan sebuah seni bagi seorang web developer untuk mendesain website nya agar website terlihat tujuannya sampai terhadap pembaca website tersebut..
Simple Responsive Jquery Accordion
Berikut ini merupakan script HTML lengkap yang digunakan untuk membuat accordion
<!DOCTYPE html>
<html>
<head>
<title>SMK Accordion-http://suckittrees.com</title>
<!-- Accordion styles -->
<link rel="stylesheet" href="css/smk-accordion.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type="text/css">
/*Demo styles*/
body{
margin: 0;
padding: 0;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 12px;
}
.container_demo{
max-width: 900px;
margin: 30px auto 100px;
}
h2{
margin: 25px 0 20px;
text-align: center;
color: #555;
}
</style>
</head>
<body>
<div class="container_demo">
<center><a href='http://suckittrees.com/artikel-507/simple-responsive-jquery-acordion.html' target='_blank'>Visit My Tutorial</a></center>
<h2>Example 1(second section active)</h2>
<!-- Accordion begin -->
<div class="accordion_example1">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in acc_active">
<div class="acc_head">Section 2</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 3 -->
<div class="accordion_in">
<div class="acc_head">Section 3</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Accordion end -->
<h2>Example 2(no active section[closeAble])</h2>
<!-- Accordion begin -->
<div class="accordion_example2">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in">
<div class="acc_head">Section 2</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 3 -->
<div class="accordion_in">
<div class="acc_head">Section 3</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Accordion end -->
<h2>Example 3(no expand icons)</h2>
<!-- Accordion begin -->
<div class="accordion_example3">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in acc_active">
<div class="acc_head">Section 2</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 3 -->
<div class="accordion_in">
<div class="acc_head">Section 3</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Accordion end -->
<h2>Example 4(multiple open)</h2>
<!-- Accordion begin -->
<div class="accordion_example4">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in acc_active">
<div class="acc_head">Section 2</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 3 -->
<div class="accordion_in acc_active">
<div class="acc_head">Section 3</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 4 -->
<div class="accordion_in">
<div class="acc_head">Section 3</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Accordion end -->
<h2>Example 5(single section[closeAble])</h2>
<!-- Accordion begin -->
<div class="accordion_example5">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Accordion end -->
<h2>Example 6( init by css class)</h2>
<!-- Accordion begin -->
<div class="accordion_example6">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Accordion end -->
<!-- Accordion begin -->
<div class="accordion_example6">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Accordion end -->
<h2>Example 7( active index [activeIntex: 2] / list style )</h2>
<!-- Accordion begin -->
<ul class="accordion_example7">
<!-- Section 1 -->
<li class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</li>
<!-- Section 2 -->
<li class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</li>
<!-- Section 3 -->
<li class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</li>
</ul>
<!-- Accordion end -->
<h2>Example 8( minimum markup )</h2>
<!-- Accordion begin -->
<div class="accordion_example8">
<!-- Section 1 -->
<div>
<div> Section 1 </div>
<div> <!--TEXT--> </div>
</div>
<!-- Section 2 -->
<div>
<div> Section 2 </div>
<div> <!--TEXT--> </div>
</div>
<!-- Section 3 -->
<div>
<div> Section 3 </div>
<div> <!--TEXT--> </div>
</div>
</div>
<!-- Accordion end -->
<h2>Example 9( nested accordions)</h2>
<!-- Accordion begin -->
<div class="accordion_example9">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in">
<div class="acc_head">Level 1</div>
<div class="acc_content nodemohtml">
<!-- Child Accordion 1 begin -->
<div class="accordion_example9">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in">
<div class="acc_head">Level 2</div>
<div class="acc_content nodemohtml">
<!-- Child Accordion 2 begin -->
<div class="accordion_example9">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in">
<div class="acc_head">Level 3</div>
<div class="acc_content nodemohtml">
<!-- Child Accordion 3 begin -->
<div class="accordion_example9">
<!-- Section 1 -->
<div class="accordion_in">
<div class="acc_head">Section 1</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
<!-- Section 2 -->
<div class="accordion_in">
<div class="acc_head">Section 2</div>
<div class="acc_content">
<!-- Your text here. For this demo, the content is generated automatically. -->
</div>
</div>
</div>
<!-- Child Accordion 3 end -->
</div>
</div>
</div>
<!-- Child Accordion 2 end -->
</div>
</div>
</div>
<!-- Child Accordion 1 end -->
</div>
</div>
</div>
<!-- Accordion end -->
</div>
<script type="text/javascript" src="js/smk-accordion.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".accordion_example1").smk_Accordion();
$(".accordion_example2").smk_Accordion({
closeAble: true, //boolean
});
$(".accordion_example3").smk_Accordion({
showIcon: false, //boolean
});
$(".accordion_example4").smk_Accordion({
closeAble: true, //boolean
closeOther: false, //boolean
});
$(".accordion_example5").smk_Accordion({closeAble: true});
$(".accordion_example6").smk_Accordion();
$(".accordion_example7").smk_Accordion({
activeIndex: 2 //second section open
});
$(".accordion_example8, .accordion_example9").smk_Accordion();
// Demo text. Let's save some space to make the code readable. ;)
$('.acc_content').not('.nodemohtml').html('<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Fusce aliquet neque et accumsan fermentum. Aliquam lobortis neque in nulla tempus, molestie fermentum purus euismod.</p>');
});
</script>
</body>
</html> 
Jasa Pembuatan Website Pemda 
Aplikasi SPPD Terbaru
Software Aplikasi Perpustakaan Berbasis Web
Aplikasi Surat Masuk Surat Keluar Berbasis Web
Aplikasi Sistem Informasi Catering berbasis Web
Source Code Sistem Informasi Surat Perintah Perjalanan Dinas (SPPD) PHP MYSQLi
Aplikasi Absensi Siswa Fingerprint dengan Sms Gateway
Aplikasi Penjualan Obat Apotik PHP MYSQL
Aplikasi Notaris Berbasis Web
Aplikasi Absensi Karyawan Berbasis Website
Sistem Informasi Organisasi Berbasis Website