From 37dcd32d59bddc0dcd5cca0f4d8cab009450004e Mon Sep 17 00:00:00 2001
From: Immaculate Atim <immaculateatim56@gmail.com>
Date: Wed, 9 Oct 2024 17:56:37 -0700
Subject: [PATCH] Changed the Name of the Atrribution Button when the status is
 Expanded or Closed to View/Close

---
 src/js/vocabulary.js | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/js/vocabulary.js b/src/js/vocabulary.js
index fe2885e4..580305f0 100644
--- a/src/js/vocabulary.js
+++ b/src/js/vocabulary.js
@@ -1,32 +1,43 @@
 const exploreButton = document.querySelector('button.explore');
 const explorePanel = document.querySelector('.explore-panel');
 
-// explorePanel.classList.add('hide');
-
 exploreButton.addEventListener('click', (event) => {
     explorePanel.classList.toggle('expand');
-    // explorePanel.classList.toggle('hide');
-});
 
+    // Toggle button text between 'View' and 'Close'
+    if (explorePanel.classList.contains('expand')) {
+        exploreButton.textContent = 'Close';
+    } else {
+        exploreButton.textContent = 'View';
+    }
+});
 
 const menuButton = document.querySelector('button.expand-menu');
 const menuPanel = document.querySelector('.primary-menu');
 
 menuButton.addEventListener('click', (event) => {
     menuPanel.classList.toggle('expand');
-    // explorePanel.classList.toggle('hide');
-});
 
+    // Toggle button text between 'View' and 'Close'
+    if (menuPanel.classList.contains('expand')) {
+        menuButton.textContent = 'Close';
+    } else {
+        menuButton.textContent = 'View';
+    }
+});
 
 const attributionButton = document.querySelector('button.expand-attribution');
 const attributionPanel = document.querySelector('.attribution-panel');
 
-if (attributionButton !== null && attributionPanel !== null ) {
-
+if (attributionButton !== null && attributionPanel !== null) {
     attributionButton.addEventListener('click', (event) => {
-        attributionButton.classList.toggle('selected');
         attributionPanel.classList.toggle('expand');
-        // explorePanel.classList.toggle('hide');
-    });
 
+        // Toggle button text between 'View' and 'Close'
+        if (attributionPanel.classList.contains('expand')) {
+            attributionButton.textContent = 'Close';
+        } else {
+            attributionButton.textContent = 'View';
+        }
+    });
 }