**** HTML
$data = admin_catalog_module_data($xmid);
echo'<div class="catelog-list">';
foreach ($data as $key => $value) {
$title = $value["title"];
$mid = $value["mid"];
echo'<div class="catelog-item-more-wrap">
<h2 class="catelog-item">
<a href="javascript:void(0)"><i class="fa fa-angle-down" aria-hidden="true"></i>'.$title.'</a>
</h2>';
$data2 = admin_catalog_module_data($mid);
foreach ($data2 as $key => $value2) {
$title2 = $value2["title"];
$mid2 = $value2["mid"];
$link2 = "link_den_nhomsp";
echo'<div class="catelog-item-more">
<h3 class="catelog-item">
<a href="'.$link2.'">'.$title2.'</a>
</h3>
</div>';
}
echo'</div>';
}
echo'</div>';
**** CSS
.catelog-list .catelog-item {
position: relative;
border-bottom: 1px solid #dae0e5;
font-size: 1.9rem;
font-weight: normal;
margin: 0;
padding: 20px 0;
margin-left: 1.75rem;
}
.catelog-list .catelog-item a {
display: inline-block;
color: #222;
width: 100%;
height: 100%;
padding-right: 2.25rem;
color: rgba(34, 34, 34, .9);
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* font-size: 14px; */
}
.catelog-list .catelog-item a:active,
.catelog-list .catelog-item a:focus{
text-decoration: none;
}
.catelog-list .catelog-item i {
margin: 0;
position: absolute;
right: 0;
color: #b3b3b3;
font-size: .9rem;
font-size: 2.5rem;
padding: 0 1.75rem;
}
.Hotcat {
font-size: 2em;
margin-left: 1.75rem;
}
.catelog-list .catelog-more {
background-color: #edf0f2;
}
.catelog-list .catelog-item-more {
display: none;
}
.catelog-list .catelog-more .catelog-item-more {
display: block;
}
.main-container.padd0 {
padding: 0;
}
**** JS
<script>
$(document).ready(function(){
$('.catelog-item-more-wrap > h2').click(function(e){
e.stopPropagation();
let parent = $(this).parent();
// Nếu đang mở → đóng lại
if(parent.hasClass('catelog-more')){
parent.removeClass('catelog-more');
parent.find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
}
// Nếu đang đóng → mở và đóng cái khác
else {
$('.catelog-item-more-wrap')
.removeClass('catelog-more')
.find('i')
.removeClass('fa-angle-up')
.addClass('fa-angle-down');
parent.addClass('catelog-more');
$(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
}
});
});
</script>
