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