#JQuery UI

JQuery UI Part 4 : Membuat Widget Accordion Dengan JQuery UI

By Diki Alfarabi Hadi
9 February 2016
JQuery UI

Membuat Widget Accordion Dengan JQuery UI – untuk pengertian accordion sendiri tidak ada ketentuan pasti. widget accordion merupakan widget yang berbentuk navigasi. biasanya accordion di gunakan untuk membuat navigasi yang berisi informasi masing-masing. di tutorial jquery ui part 4 ini kita akan belajar membuat widget accordion dengan jquery ui. silahkan simak langsung penjelasan berikut ini tentang cara membuat widget accordion dengan jquery ui. jquery ui sudah menyediakan fungsi untuk membuat menu accordion dengan sangat mudah. kita tinggal menggunakan fungsi accordion() untuk membuat nya. simak penjelasan berikut. Membuat Widget Accordion Dengan JQuery UI

Membuat Widget Accordion Dengan JQuery UI

Setelah mengetahui pengertian dasar aja dari accordion langsung saja kita langsung membuat widget accordion dengan jquery ui.

accordion.html

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 4 : Membuat Widget Accordion Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Widget Accordion Dengan JQuery UI | www.malasngoding.com</h1>

<h3>Section 1</h3>

<div>

<p>

<h4>Section 1</h4>

Ini section 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure JQuery UI Part 4 : Membuat Widget Accordion Dengan JQuery UI 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.

</p>

</div>

<h3>Section 2</h3>

<div>

<p>

<h4>Section 2</h4>

dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla JQuery UI Part 4 : Membuat Widget Accordion Dengan JQuery UI pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure.

</p>

</div>

<h3>Section 3</h3>

<div>

<p>

<h4>Section 3</h4>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco JQuery UI Part 4 : Membuat Widget Accordion Dengan JQuery UI 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.

</p>

<ul>

<li>List item three</li>

</ul>

</div>

<h3>Section 4</h3>

<div>

<p>

<h4>Section 4</h4>

Cras dictum. Pellentesque habitant morbi tristique senectus et netus

et malesuada fames ac turpis egestas. JQuery UI Part 4 : Membuat Widget Accordion Dengan JQuery UI Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

mauris vel est.

</p>

<p>

Membuat widget accordion dengan jquery ui.

</p>

</div>

</body>

$(document).ready(function(){

$( "#widget-accordion" ).accordion();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

perhatikan pada contoh di atas. pertama kita hubungkan dulu file jquery, jquery ui dan css dari jquery ui. Membuat Widget Accordion Dengan JQuery UI

dan membuat kerangka dari accordion dengan format berikut

<h3>Section 1</h3>

<div>

<p>

<h4>Section 1</h4>

Ini section 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

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.

</p>

</div>

<h3>Section 2</h3>

<div>

<p>

<h4>Section 2</h4>

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 laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure.

</p>

</div>

<h3>Section 3</h3>

<div>

<p>

<h4>Section 3</h4>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

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 laborm.

</p>

<ul>

<li>List item three</li>

</ul>

</div>

<h3>Section 4</h3>

<div>

<p>

<h4>Section 4</h4>

Cras dictum. Pellentesque habitant morbi tristique senectus et netus

et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

mauris vel est.

</p>

<p>

Membuat widget accordion dengan jquery ui.

</p>

</div>

dan terakit kita berikan fungsi accordion() untuk membuat accordion dengan jquery ui.

$(document).ready(function(){

$( "#widget-accordion" ).accordion();

});

</script>

membuat widget accordion dengan jquery ui

See the Pen JQuery UI Part 4 : Membuat Widget Accordion Dengan JQuery UI by Malas Ngoding (@malasngoding) on CodePen.0

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.