improve past seminars collapsing div

css/style.css

@@ -823,6 +823,7 @@ a:focus {
 /*******************************/
 /******* Events *******/
 /*******************************/
+
 .speech-list {
     list-style: none;
     padding: 0;
@@ -837,6 +838,26 @@ a:focus {
 	position: relative;
 }
 
+.speech-header:after {
+  content: '\002B';
+  color: black;
+  float: right;
+}
+
+.speech-header.active:after {
+    content: "\2212";
+}
+
+.speech-header.active {
+    background-color: #BDD8E1;
+}
+
+
+
+
+
+
+
 .details {
     display: none;
     padding: 5px;
@@ -1374,3 +1395,5 @@ a:focus {
     font-size: 18px; /* Adjust the font size as needed */
 }
 
+
+

index.html

@@ -205,8 +205,6 @@ <h3>ITER: Iterative Neural Repair for Multi-Location Patches</h3>
 
         <!-- Upcoming Events  End -->
 
-
-
         <!-- Past Events Start -->
         <div class="pastevent wow zoomIn" data-wow-delay="0.1s">
             <div class="container">
@@ -219,8 +217,8 @@ <h2>Past Seminars<h2>
 						<ul class="speech-list">
 							<li>
 								<div class="speech-header">
-									<span class="title"><b>Rete: Learning Namespace Representation for Program Repair</b>, Monday, October 9th, 2023, by <b>Nikhil Parasaram</b> from <b>UCL</b></span>
-									<span class="chevron">&#8810;</span>
+									<b>Rete: Learning Namespace Representation for Program Repair</b>, Monday, October 9th, 2023, by <b>Nikhil Parasaram</b> from <b>UCL</b>
+
 								</div>
 
 								<div class="details">
@@ -240,7 +238,6 @@ <h3>Rete: Learning Namespace Representation for Program Repair</h3>
 									</div>
 								</div>
 							</li>
-
 
 						<!-- Add more speech items as needed -->
 						</ul>

js/script.js

@@ -4,5 +4,9 @@ speechHeaders.forEach(header => {
     header.addEventListener('click', () => {
         const details = header.nextElementSibling;
         details.style.display = details.style.display === 'none' || details.style.display === '' ? 'block' : 'none';
+        header.classList.toggle('active');
     });
-});
+});
+
+
+