https://i.sstatic.net/jkDoL.pngI have been attempting to switch between the accordion panels; however, when one is clicked, the others should close but this functionality is not working as intended. I need assistance please. In this scenario, there are three categories of creatures: Animals, Birds & Insects, and under each category, there are specific creatures like dogs, cats, peacocks, etc. When a creature is selected, for example a peacock, the corresponding data table should open up. However, clicking on another creature like Kingfisher results in both tables remaining open with the old information still visible. Ideally, only one table should be displayed at a time unless a different creature is chosen. Also, if the Animals section is closed, all related descriptions should also be hidden.
<!DOCTYPE html>
<html>
<head>
<title>Accordions</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
</head>
... (remaining code)
<script>
$(document).ready(function(){
var acc = $(".accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", 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>