JQuery Study Notes— A small demo for unfolding its content

浏览数：26 / 时间：2015年06月09日

1. Before unfolding:

2. After unfolding:

3. coding:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Home</title>
    <style>
        .parent {
            width: 500px;
            color: white;
        }

        .label {
            width: 500px;
            background-color: gray;
            /*padding:15px;*/
        }
        .label-content {
            background-color: gray;
            padding-left:16px;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
        }
        .label-radius {
            border-radius: 10px;
        }
        .label-radius-up{
            border-top-left-radius:10px;
            border-top-right-radius:10px;
        }
        .hiding {
            display: none;
        }

        .icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
            display: inline-block;
        }

        .icon-right {
            background-image: url("images/ui-icons_ef8c08_256x240.png");           
            background-position-x:-32px;
            background-position-y:0px;
        }
        .icon-down {
            background-image: url("images/ui-icons_ef8c08_256x240.png");
            background-position-x:-64px;
            background-position-y:0px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".label").on("click", function () {
                
                if ($(this).find(".icon").hasClass("icon-right")) {// current div haven't been fold
                    // resetting the whole div
                    $(".label").removeClass("label-radius-up");
                    $(".label").addClass("label-radius")
                    $(".icon").removeClass("icon-down");
                    $(".icon").addClass("icon-right");
                    $(".label-content").addClass("hiding");
                    

                    $(this).find(".icon").removeClass("icon-right");
                    $(this).find(".icon").addClass("icon-down");
                    $(this).removeClass("label-radius");
                    $(this).addClass("label-radius-up");
                    $(this).next().removeClass("hiding");

                } else {
                    $(this).find(".icon").removeClass("icon-down");
                    $(this).find(".icon").addClass("icon-right");
                    $(this).removeClass("label-radius-up");
                    $(this).addClass("label-radius");
                    $(this).next().addClass("hiding");
                }
            });
        });
    </script>
</head>
<body>
    <div class="parent">
        <div class="label label-radius"><span class="icon icon-right"></span>First</div>
        <div class="label-content hiding">111111111111</div>
        <div class="label label-radius"><span class="icon icon-right"></span>Second</div>
        <div class="label-content hiding">222222222222</div>
        <div class="label label-radius"><span class="icon icon-right"></span>Three</div>
        <div class="label-content hiding">3333333333333</div>
    </div>
</body>
</html>

4. Source Download