jQuey UI Accordion With Demo Code

By informerfrk

jQuery UI is a jQuery based library which can be used as to create user interface interactions, effects and much more easily. You just need to write less code and you will get more in returns.

Today, in this tutorial I am going to tell you about jQuery Accordion which is a widget in the jQueryUI library.

We can use accordion of jQuery UI to create expandable and collapsible content holder that is broken into sections very easily by writing only a few lines of codes.

Basic syntax of jQuery UI Accordion

Below are given the basic syntax of Accordion

1.

$(selector, context).accordion (options)

2.

$(selector, context).accordion ("action", params)

The first method that you can see in syntax specifies that an HTML element and the contents inside it should be treated and managed as accordion menus. The options parameter is a JavaScript object that specifies the appearance and behavior of the menu that is involved.

In the second method, we can perform an action on accordion elements. For example, it can be used for selecting/de-selecting the accordion menu.

Simple example code of jQueryUI accordion

Now I am going to provide you simple example code snippets to create jQuery UI accordion. For this, you have to include the jQuery and jQuery UI JavaScript library:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Now below is the example HTML code that you can use:

<div class="ui-accordion">

    <h3>This is section one</h3>
    <p>This is the content of section one of jQuery UI Accordion.<br/>
    jQuery UI Accordion is just awesome.</p>

    <h3>This is section two</h3>
    <p>This is the content of section two of jQuery UI Accordion..<br/>
    jQuery UI Accordion is just awesome.</p>

    <h3>This is section three</h3>
    <p>This is the content of section three of jQuery UI Accordion..<br/>
    jQuery UI Accordion is just awesome.</p>

    <h3>This is section four</h3>
    <p>This is the content of section four of jQuery UI Accordion..<br/>
    jQuery UI Accordion is just awesome.</p>

</div>

After that, the most important part is to provide the JavaScript code that is given below:

  $(document).ready(function(){
     $(".ui-accordion").accordion();
  })

The above code uses the jQuery and jQuery UI library. You can see that we have applied the jQuery UI to the class “ui-accordion” using this code-  $(“.ui-accordion”).accordion();.

The complete example source code of jQuery UI:

Now below is the complete example code:

<!DOCTYPE html>
<html>
<head>
  <title>jQueryUI Accordion</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script type="text/javascript">
  	$(document).ready(function(){
         $(".ui-accordion").accordion();
  	})
  </script>

<style type="text/css">
  h3 {background: #777; color: #fff; padding-left: 6px; cursor: pointer;display: block;}
</style>
</head>
<body>


<div class="ui-accordion">

    <h3>This is section one</h3>
    <p>This is the content of section one of jQuery UI Accordion.<br/>
    jQuery UI Accordion is just awesome.</p>

    <h3>This is section two</h3>
    <p>This is the content of section two of jQuery UI Accordion..<br/>
    jQuery UI Accordion is just awesome.</p>

    <h3>This is section three</h3>
    <p>This is the content of section three of jQuery UI Accordion..<br/>
    jQuery UI Accordion is just awesome.</p>

    <h3>This is section four</h3>
    <p>This is the content of section four of jQuery UI Accordion..<br/>
    jQuery UI Accordion is just awesome.</p>

</div>

</body>
</html>

Just run the above example code on your browser and you will see the nice jQuery UI accordion effect. I have added a little bit of CSS to give it a better look.The <h3> tag will become the title of each section. You just need to

The <h3> tag will become the title of each section. You just need to click the <h3> tag to see each section content under the title.

Leave a Reply

Your email address will not be published. Required fields are marked *