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/avg_household_size_2022.png" alt="Choropleth map of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) (U.S. Census Bureau, 2022).">
          <figcaption><span class="tooltip-group"><span class="tooltip-span">Choropleth map</span><span id="choropleth-map-tooltip" class="tooltiptext">Type of map that displays divided geographical areas or regions that are coloured, shaded or patterned in relation to a data variable. This provides a way to visualise values over a geographical area, which can show variation or patterns across the displayed location.</span></span> of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) <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>
      </div>   
    </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: #1b695e;
}

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

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

.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>

<style lang="scss">
.tooltip-span {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border-bottom: 1px dotted rgba(54, 54, 54, 0.8);
  z-index: 10;
}

.tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  margin-left: -170px;
  margin-top: 2rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.social-vulnerability {
  width: 500px;
  margin-left: -170px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>