Accordion Dialog Box with JQuery

Posted on December 28th, 2010 in Academic by oki.maulana08

Well, it’s very simple how to make your web look great. One thing that you can do is using accordion dialog box.

Ok, first open notepad or netbeans or aptana studio or something else. Then you write HTML code below.

<html>

<head>

<link rel=”stylesheet” href=”development-bundle/themes/hot-sneaks/ui.all.css”>

<script src=”development-bundle/jquery-1.3.2.js”></script>

<script src=”development-bundle/ui/ui.core.js”></script>

<script src=”development-bundle/ui/ui.dialog.js”></script>

<script src=”development-bundle/ui/ui.accordion.js”></script>

<script>

$(document).ready(function(){

$(“#dialogbox”).dialog();

$(“#main”).accordion();

});

</script>

</head>

<body style=”font-size:65%;”>

<div title=”Accordion Dialog Box”>

<div>

<h2><a href=”#”>Web Designer</a></h2><div>Web designer is the people who design website.</div>

<h2><a href=”#”>Web Programmer</a></h2><div>Web programmer is people who make code for website.</div>

<h2><a href=”#”>Web Administrator</a></h2><div>Web administrator is people who maintenance website everytime.</div>

</div>

</div>

</body>

</html>

Then you must copy javascript for this code.

Put folder development-bundle is same as the place where you save HTML code.

And finish, let’s enjoy.

Post a comment