From aeee37672be966ec8a66814aae83e16b767c5bcb Mon Sep 17 00:00:00 2001
From: jebowe3 <jaybowen@uiowa.edu>
Date: Wed, 2 Oct 2024 15:52:34 -0500
Subject: [PATCH] Add link to key provision comparison

---
 .vscode/settings.json |  3 +++
 index.html            | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3a88fae..b23793b 100644
--- a/index.html
+++ b/index.html
@@ -206,6 +206,7 @@
     }
 
     .collapsible-header-overview,
+    .collapsible-header-provisions,
     .collapsible-header-comparison,
     .collapsible-header-regulation,
     .collapsible-header-laws {
@@ -228,6 +229,7 @@
       display: block;
     }
 
+    .collapsible-content-provisions,
     .collapsible-content-comparison,
     .collapsible-content-regulation {
       display: none;
@@ -344,6 +346,21 @@ <h4 style="padding: 0 15px;"><span class="arrow-icon">&#9660;</span> <!-- Down-f
             <p>To filter the map, select your desired combination of genetic privacy regulations. You will notice the map change based on your combination of radio button and checkbox inputs. The scrollable list of linked regulations will also change according to your selections. Press the reset button to return to the general coverage map.</p>
           </div>
         </div>
+
+        <div class="collapsible-provisions">
+          <div class="collapsible-header-provisions">
+            <h4 style="padding: 0 15px;"><span class="arrow-icon">&#9658;</span> <!-- Right-facing arrow icon -->Compare Key Provisions</h4>
+          </div>
+          <div class="collapsible-content-provisions">
+            <p>There are many different decisions that an insurer makes about an individual. They can make decisions about whether to insure them (underwriting), renew an existing policy, or how much to charge for coverage (premiums). <a href="key-provisions.html" target="_blank">Please click here to compare key provisions between a few states.</a></p>
+          </div>
+        </div>
+
+
+
+
+
+
         <!-- STATE LAW COMPARISON START -->
         <div class="collapsible-comparison">
           <div class="collapsible-header-comparison">
@@ -1750,10 +1767,12 @@ <h1 class="dynamictitle">Genetic Privacy Laws in the USA</h1>
     // Collapsible content instructions
     // Get the collapsible section, header, and button
     const collapsibleSectionOverview = document.querySelector('.collapsible-overview');
+    const collapsibleSectionProvisions = document.querySelector('.collapsible-provisions');
     const collapsibleSectionComparison = document.querySelector('.collapsible-comparison');
     const collapsibleSectionRegulation = document.querySelector('.collapsible-regulation');
     const collapsibleSectionLaws = document.querySelector('.collapsible-laws');
     const collapsibleHeaderOverview = document.querySelector('.collapsible-header-overview');
+    const collapsibleHeaderProvisions = document.querySelector('.collapsible-header-provisions');
     const collapsibleHeaderComparison = document.querySelector('.collapsible-header-comparison');
     const collapsibleHeaderRegulation = document.querySelector('.collapsible-header-regulation');
     const collapsibleHeaderLaws = document.querySelector('.collapsible-header-laws');
@@ -1771,6 +1790,19 @@ <h1 class="dynamictitle">Genetic Privacy Laws in the USA</h1>
       }
     });
 
+    // Toggle the visibility of the collapsible content when the header is clicked
+    collapsibleHeaderProvisions.addEventListener('click', function() {
+      const content = collapsibleSectionProvisions.querySelector('.collapsible-content-provisions');
+      const arrowIcon = collapsibleHeaderProvisions.querySelector('.arrow-icon');
+      if (content.style.display === 'block') {
+        content.style.display = 'none';
+        arrowIcon.innerHTML = '&#9658;'; // Right-facing arrow
+      } else {
+        content.style.display = 'block';
+        arrowIcon.innerHTML = '&#9660;'; // Down-facing arrow
+      }
+    });
+
     // Toggle the visibility of the collapsible content when the header is clicked
     collapsibleHeaderComparison.addEventListener('click', function() {
       const content = collapsibleSectionComparison.querySelector('.collapsible-content-comparison');
@@ -1818,7 +1850,6 @@ <h1 class="dynamictitle">Genetic Privacy Laws in the USA</h1>
     });
 
 
-
     // TOOLTIP CODE
     // Function to show the hover tooltip
     function showHoverTooltip(content, x, y) {