From 9d54b3dfc5b1ff2e93452cc0387060005fd8b851 Mon Sep 17 00:00:00 2001
From: Sophie Bui <bui.anhsophie@gmail.com>
Date: Tue, 16 Jan 2024 17:22:19 -0600
Subject: [PATCH] Added styling for accordions in news page

Starts on line 147
---
 style/carousel.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/style/carousel.css b/style/carousel.css
index 40ec814..ab81e32 100755
--- a/style/carousel.css
+++ b/style/carousel.css
@@ -143,3 +143,50 @@ body {
 
 /* Show the dropdown menu on hover */
 .dropdown-menu:hover .dropdown-content {display: block;}
+
+/* NEWS ACCORDION--------------------------------------------------*/
+
+/* Style the buttons that are used to open and close the accordion panel */
+.accordion {
+  background-color: #78A6DA;
+  color: #02182D;
+  cursor: pointer;
+  padding: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 20px;
+  font-weight: bold;
+  transition: 0.4s;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .accordion:hover {
+  background-color: #02182D;
+  color: #ffffff; 
+}
+
+/*Accordion Icon*/
+.accordion:after {
+  content: '\002B';
+  color: #02182D;
+  font-weight: bold;
+  float: right;
+  margin-left: 5px;
+}
+
+.active:after {
+  content: "\2212";
+  color: #ffffff;
+}
+
+/* Style the accordion panel. Note: hidden by default */
+.panel {
+  padding: 0 18px;
+  background-color: white;
+  display: none;
+  overflow: hidden;
+}