Demo of Accordion Animate using JQuery UI

About JQuery

JQuery is a library of JavaScript functions. This is used to generate many front end functionality without writing all the codes. We can just include these libraries to use different widgets, functions and much more to develop an interactive web page.

How to Use

To include these JQuery libraries , either we can download the JavaScript files or we can directly link them from some hosted servers where these files are kept. These servers known as CDN( Content Delivery Networks ) are made available by google, Microsoft, JQuery and few others. You can use any of them to include the JQuery Library files. Based on your uses you can select different files to link.

Advantage of JQuery

We can show animations, connect to backend script, show calendars to select date, show progress bar and develop many interactive script for better user experience. We can do all these by writing few lines of code by using these libraries.

System Requirement

JQuery runs at client end browser so any browser with script execution enabled can run JQuery. However older browsers have some limitation so better use updated or advance browser to run JQuery.

Full Code

<html>
<head>
<title></title>
</head>

<div id='accordion'>
 <h3>Header 1 ( panel No. 0 )</h3>
  <div>
    Text about Header 1    
  </div>
 <h3>Header 2 ( panel No. 1 )</h3>
  <div>
    Text about Header 2    
  </div>
<h3>Header 3 ( panel No. 2 )</h3> 
  <div>
    Text header 3
  </div>
<h3>Header 4 ( panel No. 3 )</h3>
  <div>
    Text about Header 4.
   </div>
</div>

<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'></script>
<link href='https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css' rel='stylesheet'>

<script>
$(document).ready(function(){
$( '#accordion' ).accordion({
animate: 1000
});
})
</script>
</body>
</html>