My implementation of collapsible in a plain HTML page looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
button.accordion {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
button.accordion.active, button.accordion:hover {
background-color: #555;
}
button.accordion:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: '';
background-image: url('download.jpg');
display: inline-block;
background-size: 30px 30px;
width:30px;
height:30px;
transform:rotate(180deg);
}
div.panel {
padding: 0 18px;
background-color: #f1f1f1;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
* {
box-sizing: border-box;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color:white;
}
</style>
</head>
<body>
<h2>Collapsible</h2>
<p>Click the button to toggle between showing and hiding the collapsible content.</p>
<div id="div2">
<button class="accordion"><a href="#">Addq</a></button>
<div class="panel">
<p>Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p>
<button class="accordion"><a href="#">Aollapsible</a></button>
<div class="panel">
<p>sdfsdfsdfsdt amet,ome Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. </p>
</div>
<button class="accordion"><a href="#" style="">Dollapsible</a></button>
<div class="panel">
<p>qqqqqqqqqqqpsible content. consequat.</p>
</div>
<button class="accordion"><a href="#">Qollapsible</a></button>
<div class="panel">
<p>zzzzzzzzzllapsible content. commodo consequat.</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
</body>
</html>
JS Fiddle: https://jsfiddle.net/c2r70eh6/4/
However, when I tried implementing the same code in an Angular application, the collapsible section didn't expand as expected. When working with Angular, I placed the HTML code in the component's HTML file, the CSS in the component's CSS file, and copied the JS into the index.html file.
The collapsible feature works fine in a simple HTML file but not in Angular. I have verified all the IDs and they are correct.
I would appreciate your assistance. Thank you in advance!