diff --git a/src/components/Maps.vue b/src/components/Maps.vue index 520d7bdb7dd69b06139398fa9d08c618d9addd4b..60a77fbcd943956937f51c041bdf96725b2b8acd 100644 --- a/src/components/Maps.vue +++ b/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;