I have encountered an issue with the AngularJS accordion functionality. It seems that when I have multiple accordions, such as accordion-1, accordion-2, and accordion-3, they all open simultaneously if clicked on individually. My main concern is: How can I ensure that only one accordion opens at a time by closing the others?
Below is the code snippet:
<div>
<button class="accordion"><b>Mens</b>
</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion"><b>Womens</b>
</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
Here are my CSS styles for the accordions:
button.accordion {
background-color: #e6e6e6;
color: #444;
cursor: pointer;
padding: 11px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 12px;
transition: 0.4s;
border-left: 5px solid #4d4dff;
}
button.accordion.active,
button.accordion:hover {
background-color: #d9d9d9;
}
div.panel {
padding: 0 18px;
background-color: #f2f2f2;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
margin-bottom: 8px;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}