Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Accordion function using jquery in Components of JQuery Examples
3188 Views
Note 
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><!--Content inside the headrer tag shown as head in accordion -->
        <div>
           <!--Content inside the div tag shown as contentin accordion -->
        </div>
        <h3> </h3><!--Second head -->
        <div>
           <!--Second head content-->
        </div>
        <h3> </h3><!--Third head -->
        <div>
           <!--Third head content-->
        </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 
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details