Contoh Penerapan Jquery UI Accordion - Salah satu kemampuan JQuery UI yang cukup mengesankan adalah mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen yang kita inginkan. Sehingga akan mempermudah kita untuk modifikasi design blogger sesuai keinginan kita. Berikut ini adalah contoh penerapan Jquery Ui Accordion secara sederhana, seperti halnya artikel sebelumnya tentang :
Contoh Efek Jquery UI
Random Post Efek Modal Jquery UI
Simple Tab Menggunakan Jquery UI
DEMO
Untuk bisa menampilkan efek Plugin Jquery UI ini :
1. Install Jquery UI sebelum kode </head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
.content {
margin:105px auto;
width:700px;
}
#accordion h4{
margin:5px 0 0;
padding:15px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size:20px;
font-weight:normal;
text-align:center;
color:#fff;
background:#36424a;
outline: 0;
cursor:pointer;
}
#accordion h4:hover {
background:#555;
}
#accordion div {
position:relative;
margin:0 0 0;
padding:15px;
color:#fff;
background:#e06666;
}
#accordion div:after {
position: absolute;
top: -27px;
left: 45px;
display: block;
width: 0;
height: 0;
margin-left: -20px;
border-width: 15px;
border-style: solid;
border-color: transparent transparent #e06666 transparent;
content: '';
}
<div class="content">
<h1> Contoh Penerapan JQuery UI Accordion</h1>
<div id="accordion">
<h4>Setunggal</h4>
<div><p>BLA BLA BLA</p>
</div>
<h4>Kalih</h4>
<div><p>BLA BLA BLA</p>
</div>
<h4>Tigo</h4>
<div><p>BLA BLA BLA</p>
</div>
<h4>Sekawan</h4>
<div><p>BLA BLA BLA</p>
</div>
</div>
</div>
$(function() {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
});
Anda hanya tinggal mengubah content " BLA BLA BLA " diatas sesuai text yang ingin di tampilkan dan untuk tag heading h4 bisa kita ubah sesuai kebutuhan
