User hari ini : 161 
User Online: 29Simple Responsive Jquery Accordion
Publish Date : 02-07-2017 , dibaca 3972 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 
Software Aplikasi Perpustakaan Berbasis Web
Aplikasi SPPD Terbaru
Aplikasi PPDB Berbasis Website Bootstrap PHP MYSQLi
Source Code website Dinamis Koramil PHP MYSQL
Website Sekolah dan Pendaftaran Siswa Baru Online PHP MYSQL
Aplikasi Pembelajaran Matematika Berbasis Web Dengan PHP Dan MySQLi
Aplikasi Pembelajaran Bahasa Jepang Berbasis Web PHP MYSQLi
Template Wordpress Hight CTR Adsense
Aplikasi Pajak Bumi dan Bangunan Berbasis Web 