<!-- Bootstrap & FontAwesome 4.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
**** CSS
<style>
.panel-heading {
position: relative;
cursor: pointer;
}
.toggle-icon {
position: absolute;
right: 10px;
top: 12px;
font-size: 16px;
}
</style>
**** HTML
<div class="container" style="margin-top: 30px;">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-plus toggle-icon"></i>
</div>
<div class="panel-body" style="display: none;">
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<i class="fa fa-plus toggle-icon"></i>
</div>
<div class="panel-body" style="display: none;">
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<i class="fa fa-plus toggle-icon"></i>
</div>
<div class="panel-body" style="display: none;">
</div>
</div>
</div>
****JS
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".panel-heading").click(function(){
var thisBody = $(this).next(".panel-body");
var thisIcon = $(this).find(".toggle-icon");
// Nếu panel đang mở thì đóng lại
if (thisBody.is(":visible")) {
thisBody.slideUp(200);
thisIcon.removeClass("fa-minus").addClass("fa-plus");
} else {
// Đóng tất cả panel khác
$(".panel-body").slideUp(200);
$(".toggle-icon").removeClass("fa-minus").addClass("fa-plus");
// Mở panel hiện tại
thisBody.slideDown(200);
thisIcon.removeClass("fa-plus").addClass("fa-minus");
}
});
});
</script>

Không có nhận xét nào:
Đăng nhận xét