Accordion function using jquery in Components of JQuery Examples

In this example i have used accordion Jquery function to show content.When you click head the content slides.

To use jquery accordion function you should use some html structure inside the body tag.
The structure of html content follows:

<body>
    <div id="accordion">
        <h3> </h3>
        <div>

        </div>
        <h3> </h3>
        <div>

        </div>
        <h3> </h3>
        <div>

        </div>
    </div>
</body>

Preview of Accordion:

Sample Accordion example

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion();
            $(".content-title").click(function () {
                $(this).next().toggle();
            });
        });
    </script>
    <style>
        .content-compo {
            display: block;
            width: 320px;
        }
        .img-area {
            width: 150px;
            float: left;
        }
        .text-area {
            width: 150px;
            float: right;
        }
        .text-area div {
            display: block;
        }
        .content-title {
            cursor: pointer;
        }
        .text-area div.text-area-content {
            display: none;
        }
    </style>
</head>

<body>
    <div id="accordion" style="width: 400px;">
        <h3>Lion</h3>
        <div>
            <div class="content-compo">
                <div class="img-area">
                    <img src="piegon.jpg" width="150" />
                </div>
                <div class="text-area">
                    <div class="content-title">Title</div>
                    <div class="text-area-content">Content</div>
                </div>
            </div>
        </div>
        <h3>Monkey</h3>
        <div>
            <div class="content-compo">
                <div class="img-area">
                    <img src="piegon.jpg" width="150" />
                </div>
                <div class="text-area">
                    <div class="content-title">Title</div>
                    <div class="text-area-content">Content</div>
                </div>
            </div>
        </div>
        <h3>Piegon</h3>
        <div>
            <div class="content-compo">
                <div class="img-area">
                    <img src="piegon.jpg" width="150" />
                </div>
                <div class="text-area">
                    <div class="content-title">Title</div>
                    <div class="text-area-content">Content</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Example Demo

[click here fo demo]

Next Topics

Next lessons of current book.

Search range of html content by id using jquery

Components of JQuery Examples

Photo slider with jquery example

Components of JQuery Examples

Using slide function with + and - sign .

Components of JQuery Examples

Using slide function with down and right arrows

Components of JQuery Examples