Items

by MrStan1slav

HTML

<div id="line">
  <div class="item"><input type="radio" name="radio" id="radio1" class="radio" checked><label for="radio1">1</label></div>
  <div class="item"><input type="radio" name="radio" id="radio2" class="radio"><label for="radio2">2</label></div>
  <div class="item"><input type="radio" name="radio" id="radio3" class="radio"><label for="radio3">3</label></div>
</div>
<div id="text">
  <h1>Lorem</h1>
  Lorem ipsum dolor sit amet.
</div>

CSS

body {
  margin:0px;
  padding:0;
}
#line {
  position: relative;
  display: flex;
  width: calc(100% - 30px);
  height: 60px;
  margin:15px;
  justify-content: space-between;
}

#line:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 5px;
  background: #D0AA6D;
  z-index: 1;
}
h1 {
  font-family: Arial Black;
}
.item {
  position: absolute;
  position: relative;
  width: 50px;
  height: 50px;
  color: #D0AA6D;
  font-size: 20px;
  font-family: Arial Black;
  background: white;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  border: 3px solid #D0AA6D;
  overflow: visible;
  z-index: 2;
  transition: all .4s;
  transform-origin: 50% 50%;
}

.item:nth-of-type(1) {
  transform: scale(1.2);
}
.item label {
  display: inline-block;
  position: relative;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  cursor: pointer;
  z-index: 3;
}
.item .radio {
  display: none;
}
.item .radio:checked+label {
  color: white;
  background: #D0AA6D;
}
.item:after,
.item:before {
  content: "";
  position: absolute;
  background: white;
  width: 5px;
  height: inherit;
  z-index: 3;
}
.item:after {
  right: -8px;
}
.item:before {
  left: -8px;
}
#text {
  margin-top: 20px;
  text-align: center;
  font-size: 18px;
  font-family: Arial;
}

JavaScript

var d = document,
  item = d.getElementsByClassName("item"),
  line = d.getElementById("line"),
  text = d.getElementById("text"),
  radio1 = d.getElementById("radio1"),
  radio2 = d.getElementById("radio2"),
  radio3 = d.getElementById("radio3");
line.addEventListener("click", function() {
  if (radio1.checked) {
    text.innerHTML = "<h1>Lorem</h1>Lorem ipsum dolor sit amet.";
    for (var i = 0; i < item.length; i++) item[i].style.transform = "scale(1)";
    item[0].style.transform = "scale(1.2)";
  } else if (radio2.checked) {
    text.innerHTML = "<h1>Ipsum</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, corrupti?"
    for (var i = 0; i < item.length; i++) item[i].style.transform = "scale(1)";
    item[1].style.transform = "scale(1.2)";
  } else if (radio3.checked) {
    text.innerHTML = "<h1>Dolor</h1>Lorem ipsum dolor sit amet, qui adipisicing elit. Vel ab aperiam, placeat sed dolor culpa blanditiis ducimus illo amet maxime!...";
    for (var i = 0; i < item.length; i++) item[i].style.transform = "scale(1)";
    item[2].style.transform = "scale(1.2)";
  }
});