Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Using slide function with + and - sign . in Components of JQuery Examples
2537 Views
Introduction 
In this example, I used slideUp and slideDown Jquery functions with + and - sign .When you click the Heading with + symbol the next sibling content expend.And + symbol change as - symbol.And then you click the Heading with - symbol the next sibling content contract.And - symbol change as + symbol.

Preview:
Example code
<html>
<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".change").click(function () {
                var x = $(this).find(".click").text();
                if (x == "+") {
                    $(this).find(".click").text('-');
                    $(this).next().slideDown();
                } else {
                    $(this).find(".click").text('+');
                    $(this).next().slideUp();
                }
            });
        });
    </script>
    <style>
        .change {
            float: left;
            width: 100%;
            display: block;
            margin: 2px 0px;
        }
        .click {
            background-color: black;
            padding: 0px 3px;
            border-radius: 6px;
            width: 10px;
            float: left;
            color: white;
            text-align: center;
        }
        .me {
            display: inline;
            position: absolute;
            left: 20px;
            float: left;
            margin: 0px 10px;
        }
        .content {
            display: none;
            float: left;
            margin: 10px 15px;
        }
        #container {
            float: left;
            background-color: rgba(120, 120, 120, 0.05);
            width: 300px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="change">
            <div class="click"><b>+</b>
            </div>
            <div class="me">Click me!!!</div>
        </div>
        <div class="content">content contentcontentcontentcontent
            <br/>contentcontentcontentcontent</div>
        <div class="change">
            <div class="click"><b>+</b>
            </div>
            <div class="me">Click me!!!</div>
        </div>
        <div class="content">content contentcontentcontentcontent
            <br/>contentcontentcontentcontent</div>
        <div class="change">
            <div class="click"><b>+</b>
            </div>
            <div class="me">Click me!!!</div>
        </div>
        <div class="content">content contentcontentcontentcontent
            <br/>contentcontentcontentcontent</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