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 at the county-level across the contiguous U.S.. The greatest percent of occupied housing units were in Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%) (U.S. Census Bureau, 2022).">
          <figcaption>Choropleth map of percent occupied housing units at the county-level across the contiguous U.S.. The greatest percent of occupied housing units were in Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022)</a></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 at the county-level across the contiguous U.S.. The greatest percent Hispanic were in Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%) (U.S. Census Bureau, 2022).">
          <figcaption>Choropleth map of percent of Hispanic or Latino at the county-level across the contiguous U.S.. The greatest percent Hispanic were in Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022)</a></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 at the county-level across the contiguous U.S.. The greatest percent disabled were in Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%) (U.S. Census Bureau, 2022).">
          <figcaption>Choropleth map of percent with a disability of total civilian noninstitutionalized population at the county-level across the contiguous U.S.. The greatest percent disabled were in Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022)</a></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) at the county-level across the contiguous U.S.. The greatest median incomes include Santa Clara County, California (153,792), San Mateo County, California (149,907) and Marin County, California (142,019) (U.S. Census Bureau, 2022).">
          <figcaption>Choropleth map of median household income in the past 12 months (in 2022 inflation-adjusted dollars) at the county-level across the contiguous U.S.. The greatest median incomes include Santa Clara County, California (153,792), San Mateo County, California (149,907) and Marin County, California (142,019) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022)</a></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 at the county-level across the contiguous U.S.. The greatest median gross rents include San Mateo County, California (2,805), Santa Clara County, California (2,719) and Marin County, California (2,487) (U.S. Census Bureau, 2022)">
          <figcaption>Choropleth map of median gross rent at the county-level across the contiguous U.S.. The greatest median gross rents include San Mateo County, California (2,805), Santa Clara County, California (2,719) and Marin County, California (2,487) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022)</a></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>