<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
#box{
width:250px;
border:1px solid black;
margin:20px;
}
#box h3{
border:1px solid black;
height: 30px;
line-height:30px;
padding-left: 20px;
background-color: skyblue;
}
#box ul li{
padding-left: 30px;
line-height: 30px;
border: 1px solid black;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div id="box">
<div class = "section">
<h3 class = "header">My Friends <span>(5/10)</span></h3>
<ul class = "list hidden">
<li class = "option">Friend</li>
<li class = "option">Friend</li>
<li class = "option">Friend</li>
<li class = "option">Friend</li>
</ul>
</div>
<div class = "section">
<h3 class = "header">My Classmates <span>(5/10)</span></h3>
<ul class = "list hidden">
<li class = "option">Friend</li>
<li class = "option">Friend</li>
<li class = "option">Friend</li>
<li class = "option">Friend</li>
</ul>
</div>
<div class = "section">
<h3 class = "header">My family <span>(5/10)</span></h3>
<ul class = "list hidden">
<li class = "option">Friend</li>
<li class = "option">Friend</li>
<li class = "option">Friend</li>
<li class = "option">Friend</li>
</ul>
</div>
<script>
const group = document.querySelectorAll('.section');
const lists = document.querySelectorAll('.list');
const head = document.querySelectorAll('.header');
const options = document.querySelectorAll('.option');
console.log(options);
for (let i = 0; i < group.length; i++){
head[i].addEventListener('click', function(){
if(lists[i].classList.contains('hidden')){
lists[i].classList.remove('hidden');
}else{
lists[i].classList.add('hidden');
}
});
}
for (let i = 0; i < options.length; i++){
options[i].addEventListener('mouseover', function(){
options[i].style.background = "yellow";
})
options[i].addEventListener('mouseout', function(){
options[i].style.background = "none";
});
}
</script>