SO-40259697

by David Thomas

HTML

<div id="div_a_1" class="pingpongdiv" data-letter="a">hkh</div>
<div id="div_b_1" class="pingpongdiv" data-letter="b">nuigyuig</div>
<div id="div_a_2" class="pingpongdiv" data-letter="a">uynyn</div>
<div id="div_b_2" class="pingpongdiv" data-letter="b">,jomoi</div>
<div id="div_a_3" class="pingpongdiv" data-letter="a">yfvrcers</div>
<div id="div_b_3" class="pingpongdiv" data-letter="b">rdcsers</div>

CSS

body {
  text-align: center;
}

div {
  box-sizing: border-box;
  width: 40%;
  height: 2em;
  line-height: 2em;
  display: inline-block;
  border: 2px solid #000;
  margin-bottom: 1em;
}

.pingpongdiv {
  opacity: 0.2;
  transition: all 1s linear;
}

.pingpongdiv[data-letter=a] {
  border-radius: 1em 0 0 1em;
}

.pingpongdiv[data-letter=b] {
  border-radius: 0 1em 1em 0;
}

.pingpongdiv[data-letter=a][data-clicked=true] {
  border-color: #f90;
}

.pingpongdiv[data-letter=b][data-clicked=true] {
  border-color: limegreen;
}

.pingpongdiv[data-letter=a][data-clicked=true],
.pingpongdiv[data-letter=a][data-clicked=true] + .pingpongdiv[data-letter=b][data-clicked=true] {
  opacity: 1;
}

JavaScript

function pairAnimate() {
  let letter = this.dataset.letter.toLowerCase(),
    previous = this.previousElementSibling;

  if (letter === 'a') {
    this.dataset.clicked = true;
  } else if (letter === 'b' && previous && previous.dataset.clicked === 'true') {
    this.dataset.clicked = true;
  }
}

var letterElements = Array.from(document.querySelectorAll('div[data-letter]'));

letterElements.forEach(letterElement => letterElement.addEventListener('click', pairAnimate));