LearnFast.Ninja

jQuery accordion tutorial and example

The jQuery function that used to change list of items to accordion exist in the jQuery UI. create custom accordion element. change that element to accordion with jQuery single function.

Step 1: create custom accordion element

<div id="acc">

    <div><a href="#">First</a></div>

    <div class="text">jquery accordion tutorial</div>

    <div><a href="#">Second</a> </div>

    <div class="text">jquery accordion example</div>

    <div><a href="#">Third</a></div>

    <div class="text">jquery accordion height can be changed by changing div css</div>

</div>


Step 2: change that element to accordion with jQuery single function

$(function () {

    $("#acc").accordion();

});


The main idea:
$("#acc").accordion();

Complete code:

<html>

<head>

    <title>jquery accordion tutorial, example</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"

        type="text/javascript"></script>

    <style type="text/css">

        .text {

            height: 200px;

        }

    </style>

</head>

<body>

    <script type="text/javascript">

        $(function () {

            $("#acc").accordion();

        });

    </script>

    <div id="acc">

        <div><a href="#">First</a></div>

        <div class="text">jquery accordion tutorial</div>

        <div><a href="#">Second</a> </div>

        <div class="text">jquery accordion example</div>

        <div><a href="#">Third</a></div>

        <div class="text">jquery accordion height can be changed by changing div css</div>

    </div>

</body>

</html>

 

Result:


Tags

jquery

ui element accordion