update css for households panel

src/components/Maps.vue

@@ -8,7 +8,7 @@
       <br>
       <div class="accordion-container">
         <button class="accordion households-accordion active">Households<span class="symbol">-</span></button>
-        <div class="panel" style="display: block;">
+        <div class="panel households-panel">
           <p v-html="mapText.paragraph1"></p>
           <img src="@/assets/images/tot_households_2022.png" alt="Choropleth map of total households in the contiguous United States aggregated at the county level where counties with the greatest total households in dark blue include Los Angeles County, California (3,363,093), Harris County, Texas (1,692,896) and  Maricopa County, Arizona (1,665,560). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
         </div>
@@ -154,7 +154,7 @@ onMounted(() => {
 }
 
 .accordion:hover::before, .accordion.active::before {
-  border-color: #f39c12;
+  border-color: rgba(217, 217, 217, 0.95);
 }
 
 .active, .accordion:hover {
@@ -162,7 +162,7 @@ onMounted(() => {
 }
 
 .panel {
-  display: none;
+  display: none; 
   overflow: hidden;
   border: 3px solid #F0F0F0; 
   margin-bottom: 15px;
@@ -175,6 +175,10 @@ onMounted(() => {
   margin: 20px;
 }
 
+.households-accordion.active + .households-panel {
+  display: block;
+}
+
 .symbol {
   font-size: 32px;
   font-weight: bold;