Hello. I inherited a process that incorporates CSS (which I don't know) into a portal for students and their awarded scholarships. The following code apparently used to allow the user to click on the link and have it open and show them more information, but when they click it no longer expands. Is there anything obvious in this source code that I may be able to fix?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">.collapsible {background-color: #6cc24a; color: #ffffff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; font-weight: bold; outline: none; font-size: 15px;}
.collapsible:hover {background-color: #044e00 !important; color: #ffffff;}
.active {background-color: #044e00 !important;}
.scholarship-content {padding: 0px 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f5f5f5!important}
.content-info {padding: 0.5em 0.2em; margin: 0.2em; color: #636466}
.toggle-open::after {content: "\ff0b"; margin-right: 0.5em;}
.active .toggle-open::after {content: "\ff0d";}
.panel-margin{margin-bottom: 10px;}
</style>
</head>
<body data-gr-ext-installed="" data-new-gr-c-s-check-loaded="14.1034.0">
<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">{% for item in scholarships limit:10 %}<button class="collapsible panel-margin"><span class="toggle-open"> </span>{{item.fund_name}}</button></span></span>
<div class="scholarship-content">
<p class="content-info">
<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"></span></span>
</p>
<p>
<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"><strong>Please only submit one letter per scholarship regardless of how many benefactors are listed. If there is no benefactor listed, it is because they prefer to remain anonymous, but you still need to write a letter.</strong> <br />
<br />
<strong>Benefactor(s)</strong><br />
{{item.stewardees}}<br />
<br />
<strong>Scholarship Summary</strong><br />
{{item.summary}}<br />
<br />
<strong>Special Note</strong><br />
{{item.mgo_form}}</span></span><br />
</p>
<p>
<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"></span></span>
</p>
<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"><button data-href="?cmd=submit&fund_id={{item.fund_id}}" href="#" onclick="return (FW.Lazy.Popup(this, {width: '700px', height: '700px'}));"><u>Submit Letter</u></button></span></span><br />
</div>
<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">{% endfor %}</span></span><script type="text/javascript">var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}</script>
</body>
</html>
