SO-72924059

by David Thomas

HTML

<div class="row">

  <!--main divs-->
  <div id="adventureHolidays" data-category="aH">
    <p>Adventure Holidays</p>
  </div>
  <div id="backpacking" data-category="bP">
    <p>Backpacking</p>
  </div>
  <div id="cruiseHolidays" data-category="cH">
    <p>Cruise Holidays</p>
  </div>
  <div id="eventTravel" data-category="eT">
    <p>Event Travel</p>
  </div>
  <div id="packageHoliday" data-category="pH">
    <p>Package Holiday</p>
  </div>
  <div id="safari" data-category="s">
    <p>Safari</p>
  </div>
  <div id="skiingAndSnowboarding" data-category="sAS">
    <p>Skiing and Snowboarding</p>
  </div>
  <div id="volunteering" data-category="v">
    <p>Volunteering</p>
  </div>
  <div data-category="all">
    <p>Show all</p>
  </div>

  <!--end on main divs-->
</div>
<div class="row">
  <!--sub divs-->

  <div id="aH-summerCamps">
    <p>Summer camps</p>
  </div>
  <div id="aH-trekking">
    <p>Trekking</p>
  </div>
  <div id="bP-longDistanceHiking">
    <p>Long Distance Hiking</p>
  </div>
  <div id="bP-thruHiking">
    <p>Thru Hiking</p>
  </div>
  <div id="cH-oceanCruising">
    <p>Ocean Cruising</p>
  </div>
  <div id="cH-riverCruising">
    <p>River Cruising</p>
  </div>
  <div id="eT-recreationsEvent">
    <p>Recreations Events</p>
  </div>
  <div id="eT-sportsEvents">
    <p>Sports events</p>
  </div>
  <div id="pH-escortedTours">
    <p>Escorted Tours</p>
  </div>
  <div id="pH-independentTours">
    <p>Independent Tours</p>
  </div>
  <div id="s-photographicSafari">
    <p>Photographic Safari</p>
  </div>
  <div id="s-cyclingSafari">
    <p>Cycling Safari</p>
  </div>
  <div id="sAS-backcountrySkiing">
    <p>Backcountry skiing</p>
  </div>
  <div id="sAS-downhillSkiing">
    <p>Downhill skiing</p>
  </div>
  <div id="v-childcare">
    <p>Childcare</p>
  </div>
  <div id="v-conservationAndEnvironment">
    <p>Conservation and Environment</p>
  </div>
</div>

CSS

:root {
  --h-1: 212;
  --h-2: 194;
  --s: 84%;
  --l: 62%;
  --c-l: var(--l);
  --bgc-l: var(--l);
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  margin-block: 0.2em;
}

.row > * {
  box-shadow: inset 0 0 0 3px currentColor, inset 0 0 0 4px #fff;
  flex-basis: 33%;
  gap: 0.1em;
  padding: 10px;
}

.row > *:nth-child(even) {
  color: hsl(var(--h-1) var(--s) var(--c-l));
  background-color: hsl(var(--h-2) var(--s) var(--bgc-l));
}

.row > *:nth-child(odd) {
  color: hsl(var(--h-2) var(--s) var(--c-l));
  background-color: hsl(var(--h-1) var(--s) var(--bgc-l));
}

.row > *:nth-child(even):hover,
.row > *:nth-child(odd):hover {
  --c-l: calc(var(--l)*0.5);
  --bgc-l: calc(var(--l) * 1.2);
}

JavaScript

const showRelevant = (evt) =>{
	let source = evt.currentTarget,
  		category = source.dataset.category;
  document.querySelectorAll('.row > div:not([data-category])').forEach(
  	(el) => {
    	let prefix = el.id.split('-')[0];
      if (category === 'all') {
      	el.hidden = false;
      } else {
      	el.hidden = category !== prefix;
      }
    })
};

document.querySelectorAll('.row > [data-category]').forEach(
	(el) => el.addEventListener('click', showRelevant)
)