To view the full list, you will need to expand the dropdown menu. The issue seems to be that when one dropdown is displayed, it covers up the others, preventing them from being pushed down.
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: grey;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<button type="button" class="collapsible">Dropdown 1</button>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
<button type="button" class="collapsible">Dropdown 2</button>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
<button type="button" class="collapsible">Dropdown 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
<script>
let coll = document.getElementsByClassName("collapsible");
let i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
let content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
In the code above, the content initially has a display property of none. Upon clicking, it toggles between block and none.
The JavaScript function checks the current display state of the content and changes it accordingly when the button is clicked.
I hope this explanation clarifies things. For a more in-depth guide, feel free to visit this w3schools link, which covers animated dropdowns and icon incorporation.