I am having trouble with a bootstrap 5 accordion. They all expand without issue but won't collapse back down. I don't know if my JS or CSS is causing an issue. I don't see any errors in Chrome's console.
https://www.harpercollege.edu/dev/whoward-dev-area/df.php
I copied them into codepen and didn't have any issues.
<h2>Important Dates (Fall 2022)</h2>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e639">
16-Week Classes (August 22 - December 16)</a></div>
</div>
<div id="collapse_d15e639" >
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>16-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for 16-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 21, 2022</td>
<td>Last day to withdraw from 16-week classes</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>December 12-16, 2022</td>
<td>Final Exam Week</td>
</tr>
<tr>
<td>December 21, 2022</td>
<td>Grades available online</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e685">
First 8-Week Classes (August 22 - October 16)</a></div>
</div>
<div id="collapse_d15e685" >
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>First 8-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for first 8-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>October 3, 2022</td>
<td>Last day to withdraw from first 8-week classes</td>
</tr>
<tr>
<td>October 16, 2022</td>
<td>First 8-week classes end</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e722">
Second 8-Week Classes (October 17 - December 11)</a></div>
</div>
<div id="collapse_d15e722" >
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>October 17, 2022</td>
<td>Second 8-week classes begin this week</td>
</tr>
<tr>
<td>October 24, 2022</td>
<td>Last day to drop for 100% refund for second 8-week classes.</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>November 28, 2022</td>
<td>Last day to withdraw from second 8-week classes.</td>
</tr>
<tr>
<td>December 11, 2022</td>
<td>Second 8-week term ends</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e759">
First 13-week Classes (August 22 - November 20)</a></div>
</div>
<div id="collapse_d15e759" >
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>First 13-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for first 13-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>October 31, 2022</td>
<td>Last day to withdraw from first 13-week classes</td>
</tr>
<tr>
<td>November 22, 2022</td>
<td>First 13-week classes end.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e799">
Second 13-week Classes (September 19 - December 16)</a></div>
</div>
<div id="collapse_d15e799" >
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>September 19, 2022</td>
<td>Second 13-week classes begin this week</td>
</tr>
<tr>
<td>September 26, 2022</td>
<td>Last day to drop for 100% refund for second 13-week classes</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>November 28, 2022</td>
<td>Last day to withdraw from second 13-week classes</td>
</tr>
<tr>
<td>December 16, 2022</td>
<td>Second 13-week classes end.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e836">
Important Dates for All Parts of Term</a></div>
</div>
<div id="collapse_d15e836" >
<div >
<p><a href="https://www.harpercollege.edu/registration/pdf/web_dates_04192022.pdf">Fall 2022 Important Dates for All Parts of Term (pdf)</a></p>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e846">
Final Examination Schedule</a></div>
</div>
<div id="collapse_d15e846" >
<div >
<p><a href="https://www.harpercollege.edu/registration/pdf/finalexamschedule_fall_2022.pdf">Final Examination Schedule Fall 2022 (pdf)</a></p>
</div>
</div><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script></div>CodePudding user response：
Please check this code now. It's working fine now. You have missed a parent id and attribute data-bs-parent="#accordionExample".
<h2>Important Dates (Fall 2022)</h2>
<div id="accordionExample">
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e639">
16-Week Classes (August 22 - December 16)</a></div>
</div>
<div id="collapse_d15e639" data-bs-parent="#accordionExample">
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>16-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for 16-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 21, 2022</td>
<td>Last day to withdraw from 16-week classes</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>December 12-16, 2022</td>
<td>Final Exam Week</td>
</tr>
<tr>
<td>December 21, 2022</td>
<td>Grades available online</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e685">
First 8-Week Classes (August 22 - October 16)</a></div>
</div>
<div id="collapse_d15e685" data-bs-parent="#accordionExample">
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>First 8-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for first 8-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>October 3, 2022</td>
<td>Last day to withdraw from first 8-week classes</td>
</tr>
<tr>
<td>October 16, 2022</td>
<td>First 8-week classes end</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e722">
Second 8-Week Classes (October 17 - December 11)</a></div>
</div>
<div id="collapse_d15e722" data-bs-parent="#accordionExample">
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>October 17, 2022</td>
<td>Second 8-week classes begin this week</td>
</tr>
<tr>
<td>October 24, 2022</td>
<td>Last day to drop for 100% refund for second 8-week classes.</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>November 28, 2022</td>
<td>Last day to withdraw from second 8-week classes.</td>
</tr>
<tr>
<td>December 11, 2022</td>
<td>Second 8-week term ends</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e759">
First 13-week Classes (August 22 - November 20)</a></div>
</div>
<div id="collapse_d15e759" data-bs-parent="#accordionExample">
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>August 22, 2022</td>
<td>First 13-week classes begin this week</td>
</tr>
<tr>
<td>August 29, 2022</td>
<td>Last day to drop for 100% refund for first 13-week classes</td>
</tr>
<tr>
<td>September 5, 2022</td>
<td>College closed in observance of Labor Day</td>
</tr>
<tr>
<td>September 7, 2022</td>
<td>First Financial Aid Disbursement</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>October 31, 2022</td>
<td>Last day to withdraw from first 13-week classes</td>
</tr>
<tr>
<td>November 22, 2022</td>
<td>First 13-week classes end.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e799">
Second 13-week Classes (September 19 - December 16)</a></div>
</div>
<div id="collapse_d15e799" data-bs-parent="#accordionExample">
<div >
<div >
<table>
<tbody>
<tr>
<td><span>April 18-20, 2022</span></td>
<td><span>Fall priority registration begins</span></td>
</tr>
<tr>
<td><span>April 21, 2022</span></td>
<td><span>Open registration for Fall 2022 for all students.</span></td>
</tr>
<tr>
<td>September 19, 2022</td>
<td>Second 13-week classes begin this week</td>
</tr>
<tr>
<td>September 26, 2022</td>
<td>Last day to drop for 100% refund for second 13-week classes</td>
</tr>
<tr>
<td>November 8, 2022</td>
<td>College closed in observance of General Election Day</td>
</tr>
<tr>
<td>November 23-27, 2022</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>November 28, 2022</td>
<td>Last day to withdraw from second 13-week classes</td>
</tr>
<tr>
<td>December 16, 2022</td>
<td>Second 13-week classes end.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e836">
Important Dates for All Parts of Term</a></div>
</div>
<div id="collapse_d15e836" data-bs-parent="#accordionExample">
<div >
<p><a href="https://www.harpercollege.edu/registration/pdf/web_dates_04192022.pdf">Fall 2022
Important Dates for All Parts of Term (pdf)</a></p>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div ><a data-bs-toggle="collapse"
aria-expanded="false" href="#collapse_d15e846">
Final Examination Schedule</a></div>
</div>
<div id="collapse_d15e846" data-bs-parent="#accordionExample">
<div >
<p><a href="https://www.harpercollege.edu/registration/pdf/finalexamschedule_fall_2022.pdf">Final
Examination Schedule Fall 2022 (pdf)</a></p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
</div>
</div>
</div>
CodePudding user response：
Rather than using Bootstrap accordion, I use the following structure that works quite well. It opens the panel clicked on and closes any other that may already be open.
CSS
.FAQ {
margin: 0 auto;
max-width: 100%;
}
.FAQcard {
margin: 10px 0;
position: relative;
}
.FAQtitle {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
color: #000;
font-weight: bold;
font-size: 150%;
cursor: default;
display: block;
padding: 1em 1.5em;
position: relative;
text-align: left;
}
.FAQtitle::after {
content: " ";
width: 8px;
height: 8px;
border-right: 1px solid #4a6e78;
border-bottom: 1px solid #4a6e78;
position: absolute;
right: 20px;
top: 20px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.FAQtitle.active::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.FAQpanel {
background: #f1f2f3;
color: #000;
display: none;
margin: 0;
padding: 2em;
text-align: left;
}
.FAQpanel p {
margin-bottom: 5px;
text-align: justify;
}
HTML
<div >
<div >
<div >Test Panel 1</div>
<div >
Test text for panel 1
</div>
</div>
<div >
<div >Test Panel 2</div>
<div >
Test text for panel 2
</div>
</div>
</div>
Javascript inside the (document).ready() function:
$(".FAQtitle").click(function (j) {
var dropDown = $(this).closest(".FAQcard").find(".FAQpanel");
$(this).closest(".FAQ").find(".FAQpanel").not(dropDown).slideUp();
if ($(this).hasClass("active")) {
$(this).removeClass("active").removeClass("selected");
} else {
$(this).closest(".FAQ").find(".FAQtitle.active").removeClass("active").removeClass("selected");
$(this).addClass("active selected");
}
dropDown.stop(false, true).slideToggle();
j.preventDefault();
});
Hopefully this is helpful for you!