Maps.vue

<template>
  <section id="map">
    <div
      id="title"
      class="text-container title-text"
    >
      <h3><p v-html="mapText.title"></p></h3>
      <br>
      <div class="accordion-container">
        <button class="accordion households-accordion active">Household sizes<span class="symbol">-</span></button>
        <div class="panel households-panel">
          <p v-html="mapText.paragraph1"></p>
          <img src="@/assets/images/perc_occupied_households_2022.png" alt="Choropleth map of percent occupied housing units in the contiguous United States aggregated at the county level where counties with the greatest percent of occupied housing units in dark blue include Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
          <figcaption>County choropleth map of contiguous U.S. displaying percent occupied housing units, using 2022 U.S. Census Bureau data, where counties with the greatest percent of occupied housing units, in dark blue, include Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and  Scott County, Minnesota (97%).</figcaption>
        </div>

        <button class="accordion latino-accordion">Hispanic populations<span class="symbol">+</span></button>
        <div class="panel">
          <p v-html="mapText.paragraph4"></p>
          <img src="@/assets/images/perc_hispanic_census_2022.png" alt="Choropleth map of percent of Hispanic or Latino in the contiguous United States aggregated at the county level where counties with the greatest percent Hispanic or Latino in dark blue include Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
          <figcaption>County choropleth map of contiguous U.S. displaying percent of Hispanic populations, using 2022 U.S. Census Bureau data, where counties with the greatest percent Hispanics, in dark blue, include Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%).</figcaption>
        </div>

        <button class="accordion disability-accordion">Disabled populations<span class="symbol">+</span></button>
        <div class="panel">
          <p v-html="mapText.paragraph5"></p>
          <img src="@/assets/images/perc_disabled_census_2022.png" alt="Choropleth map of percent with a disability of total civilian noninstitutionalized population in the contiguous United States aggregated at the county level where counties with the greatest percent disabled in dark blue include Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
          <figcaption>County choropleth map of contiguous U.S. displaying percent with a disability of total civilian noninstitutionalized populations, using 2022 U.S. Census Bureau data, where counties with the greatest percent disabled, in dark blue, include Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%).</figcaption>
        </div>

        <button class="accordion income-accordion">Income inequalities<span class="symbol">+</span></button>
        <div class="panel">
          <p v-html="mapText.paragraph2"></p>
          <img src="@/assets/images/med_income_census_2022.png" alt="Choropleth map of median household income in the past 12 months (in 2022 inflation-adjusted dollars) in the contiguous United States aggregated at the county level where counties with the greatest median household income in dark blue include Santa Clara County, California (153,792), San Mateo County, California (149,907) and Marin County, California (142,019). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
          <figcaption>County choropleth map of contiguous U.S. displaying median household income in the past 12 months (in 2022 inflation-adjusted dollars), using 2022 U.S. Census Bureau data, where counties with the greatest median household, in dark blue, include Santa Clara County, California (153,792), San Mateo County, California (149,907) and Marin County, California (142,019).</figcaption>
        </div>

        <button class="accordion renters-accordion">Renter disparities<span class="symbol">+</span></button>
        <div class="panel">
          <p v-html="mapText.paragraph3"></p>
          <img src="@/assets/images/median_rent_2022.png" alt="Choropleth map of median gross rent in the contiguous United States aggregated at the county level where counties with the greatest median gross rent in dark blue include San Mateo County, California (2,805), Santa Clara County, California (2,719) and Marin County, California (2,487). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
          <figcaption>County choropleth map of contiguous U.S. displaying median gross rent, using 2022 U.S. Census Bureau data, where counties with the greatest median gross rent, in dark blue, include San Mateo County, California (2,805), Santa Clara County, California (2,719) and Marin County, California (2,487).</figcaption>
        </div>

        <button class="accordion health-accordion">Health case study<span class="symbol">+</span></button>
        <div class="panel">
          <p v-html="mapText.paragraph6"></p>
        </div>

        <button class="accordion livingconditions-accordion">Living conditions case study<span class="symbol">+</span></button>
        <div class="panel">
          <p v-html="mapText.paragraph6"></p>
        </div>

        <button class="accordion exposure-accordion">Exposure to stressor case study<span class="symbol">+</span></button>
        <div class="panel">
          <p v-html="mapText.paragraph6"></p>
        </div>

      </div>
      <br>
      <p v-html="mapText.paragraph7"></p>    
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue';
import { isMobile } from 'mobile-device-detect';
import text from './../assets/text/text.js';
const mobileView = isMobile;
const mapText = text.components.mapText;

onMounted(() => {
  const acc = document.getElementsByClassName("accordion");
  for (let i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      const panel = this.nextElementSibling;
      const symbol = this.querySelector('.symbol');
      if (panel.style.display === "block") {
        panel.style.display = "none";
        symbol.textContent = "+";
      } else {
        panel.style.display = "block";
        symbol.textContent = "-";
      }
    });
  }
});
</script>

<style scoped>
.accordion {
  background-color: #eee;
  color: #fff;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  line-height: 1.2;
  transition: 0.4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2.15rem;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  position: relative;
  border: 2px solid transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px
}

.accordion.households-accordion {
  background-color: #092836;
}

.accordion.income-accordion {
  background-color: #2A468F;
}

.accordion.renters-accordion {
  background-color: #2A468F;
}

.accordion.latino-accordion {
  background-color: #092836;
}

.accordion.disability-accordion {
  background-color: #092836;
}

.accordion.health-accordion {
  background-color: #EE5775;
}
.accordion.livingconditions-accordion {
  background-color: #7A5195;
}

.accordion.exposure-accordion {
  background-color: #FFA601;
}


.accordion::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  z-index: -1;
  transition: border-color 0.3s;
}

.accordion:hover::before, .accordion.active::before {
  border-color: rgba(217, 217, 217, 0.95);
}

.active, .accordion:hover {
  background-color: black; 
}

.panel {
  display: none; 
  overflow: hidden;
  border: 3px solid #F0F0F0; 
  margin-bottom: 15px;
  margin-top: -15px;
  border-top-width: 0;
  border-radius: 0 0 10px 10px;
}

.panel p {
  margin: 20px;
}

.households-accordion.active + .households-panel {
  display: block;
}

.symbol {
  font-size: 32px;
  font-weight: bold;
}

figcaption {
  background-color: white;
  color: black;
  padding: 16px;
  width: 100%;
  text-align: left;
  line-height: 1.2;
  font-size: 2 rem;
  font-family: 'Source Sans Pro', sans-serif;
  margin-top: 8px;
}

</style>