From 377c363522c39cf735b854ea6de39a7a80a8c352 Mon Sep 17 00:00:00 2001
From: KenChanA <chanhingwahkendrick@gmail.com>
Date: Wed, 23 Apr 2025 16:16:50 -0400
Subject: [PATCH] Quick fix accordion header

---
 client/src/components/LiveResults/LiveResults.tsx    | 10 ++++++----
 .../components/QuestionsDisplay/QuestionDisplay.tsx  | 12 ++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx
index 4369a4b..e77a25e 100644
--- a/client/src/components/LiveResults/LiveResults.tsx
+++ b/client/src/components/LiveResults/LiveResults.tsx
@@ -26,14 +26,16 @@ interface LiveResultsProps {
 const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
     const [showUsernames, setShowUsernames] = useState<boolean>(false);
     const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
-    const [isOpen, setIsOpen] = useState<boolean>(true);
+    const [activeKey, setActiveKey] = useState<string | null>('0');
 
+    const toggleAccordion = () => {
+        setActiveKey(activeKey === '0' ? null : '0');
 
     return (
-        <Accordion defaultActiveKey="0" alwaysOpen>
+        <Accordion activeKey={activeKey} onSelect={toggleAccordion}>
             <Accordion.Item eventKey="0">
-                <Accordion.Header onClick={() => setIsOpen(!isOpen)}>
-                    <div className="text-2xl text-bold">{isOpen ? 'Résultats du quiz' : 'Masquer les résultats'}</div>
+                <Accordion.Header>
+                    <div className="text-2xl text-bold">{activeKey === '0' ? 'Résultats du quiz' : 'Masquer les résultats'}</div>
                 </Accordion.Header>
                 <Accordion.Body>
                         <div className="action-bar mb-1">
diff --git a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
index 1ed7887..edf99f2 100644
--- a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
@@ -36,8 +36,12 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     //     return isMobile ? '100%' : '20%';
     // }, [isMobile]);
     
-    const [isOpen, setIsOpen] = useState<boolean>(true);
     const [showResults, setShowResults] = useState<boolean>(false);
+    const [activeKey, setActiveKey] = useState<string | null>('0');
+
+    const toggleAccordion = () => {
+        setActiveKey(activeKey === '0' ? null : '0');
+    };
 
     let questionTypeComponent = null;
     switch (question?.type) {
@@ -96,10 +100,10 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     return (
         <>
             {showAnswerToggle ? (
-                <Accordion defaultActiveKey="0" alwaysOpen>
+                <Accordion activeKey={activeKey} onSelect={toggleAccordion}>
                     <Accordion.Item eventKey="0">
-                        <Accordion.Header onClick={() => setIsOpen(!isOpen)}>
-                            {isOpen ? 'Afficher les questions' : 'Masquer les questions'}
+                        <Accordion.Header>
+                            {activeKey === '0' ? 'Afficher les questions' : 'Masquer les questions'}
                         </Accordion.Header>
                         <Accordion.Body>
                             <FormControlLabel