<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function showItems(){
var items = document.querySelectorAll("#main li");
items.forEach(item => {
item.style.display = "block";
});
}
</script>
</head>
<body>
</body>
<ul id="main" onclick="showItems()">main1
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
<ul id="main">main2
<li>sub11</li>
<li>sub2</li>
<li>sub11</li>
</ul>
</html>
Custom CSS:
#main li{
list-style-type: none;
display: none;
}
In the code provided, clicking on main1 only displays the first list item. I need a modification to show all list items under that section when clicked. Can you assist with this issue?