Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Using slide function with down and right arrows
2080 Views
Note 
In this example, I used slideToggle Jquery functions with side arrow and down arrow images .When you click the Heading with side arrow image the next sibling content expend.And side arrow image symbol change as down arrow image.And then you click the Heading with down arrow image the next sibling content contract.And down arrow image change as side arrow image.

Preview:
Example Code
<!DOCTYPE html>
<html>

<head>
    <style>
        #container {
            background-color: ececec;
            width: 400px;
            float: left;
        }
        .simg {
            float: left;
        }
        .header {
            cursor: pointer;
            width: 400px;
            float: left;
        }
        .con {
            display: none;
        }
        .cli {
            float: left;
            margin: 0px 0px 0px 5px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $(".simg img:last-child").hide();
            $(".header").click(function () {
                if ($(this).find(".simg img").attr("src").match("http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png")) {
                    $(this).find(".simg img").attr("src", "http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
                    $(this).css("border", "1px dotted black");
                    $(this).next().slideToggle();
                } else {
                    $(this).find(".simg img").attr("src", "http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png");
                    $(this).css("border", "none");
                    $(this).next().slideToggle();
                }
            });
        });
    </script>
</head>

<body>
    <div id="container">
        <div class="header">
            <div class="simg">
                <img src="http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png" style="width:15px;height:15px;" />
                <img src="http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" style="width:15px;height:15px;" />
            </div>
            <div class="cli">click</div>
        </div>
        <div class="con">
            <div>content</div>
        </div>
        <div class="header">
            <div class="simg">
                <img src="http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png" style="width:15px;height:15px;" />
                <img src="http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" style="width:15px;height:15px;" />
            </div>
            <div class="cli">click</div>
        </div>
        <div class="con">
            <div>content</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