JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dev_layers">
  <div class="col-md-12 ul_layer">
    <ul class="left_section">
      <li><a id="lin_lay_6" onclick="dev_clicker6();">Защитное стекло</a></li>
      <li><a id="lin_lay_5" onclick="dev_clicker5();">Замена тачскрина</a></li>
      <li><a id="lin_lay_4" onclick="dev_clicker4();">Замена кнопки / дисплея</a></li>
      <li><a id="lin_lay_3" onclick="dev_clicker3();">Замена аккумулятора</a></li>
      <li><a id="lin_lay_2" onclick="dev_clicker2();">Замена какой то хуйни</a></li>
      <li><a id="lin_lay_1" onclick="dev_clicker1();">Замена корпуса</a></li>
    </ul>
    <ul class="right_section">
      <li class="dev_layer6">
        <img src="http://nj.pa.infobox.ru/wp-content/uploads/2017/06/layer_6.png">
      </li>
      <li class="dev_layer5">
        <img src="http://nj.pa.infobox.ru/wp-content/uploads/2017/06/layer_5.png">
      </li>
      <li class="dev_layer4">
        <img src="http://nj.pa.infobox.ru/wp-content/uploads/2017/06/layer_4.png">
      </li>
      <li class="dev_layer3">
        <img src="http://nj.pa.infobox.ru/wp-content/uploads/2017/06/layer_3.png">
      </li>
      <li class="dev_layer2">
        <img src="http://nj.pa.infobox.ru/wp-content/uploads/2017/06/layer_2.png">
      </li>
      <li class="dev_layer1">
        <img src="http://nj.pa.infobox.ru/wp-content/uploads/2017/06/layer_1.png">
      </li>
    </ul>

  </div>

CSS

.dev_layers {
  margin-top: 100px;
}

.ul_layer {
  width: 100%;
  min-height: 350px;
  position: relative;
}

.ul_layer ul {
  display: block;
  float: left;
  width: 300px;
}

.left_section li a {
  margin-bottom: 25px;
  display: block;
  cursor: pointer;
}
.right_section{margin:0}
.right_section li {
  position: absolute;
  height: 350px;
  width: 60%;
  display: block;
  list-style: none;
}

.right_section li img {
  width: 60%;
}


/************ z-index *************/

.dev_layer1 {
  z-index: 1;
}

.dev_layer2 {
  z-index: 2;
}

.dev_layer3 {
  z-index: 3;
}

.dev_layer4 {
  z-index: 4;
}

.dev_layer5 {
  z-index: 5;
}

.dev_layer6 {
  z-index: 6;
}

JavaScript

click = 1;

function dev_clicker1() {
  if (click) {
    $(".dev_layer1").animate({
      top: "-80px",
    }, 500);
    $(".dev_layer1").css({
      zIndex: "7"
    }, 500);
    click = 0;
  } else {
    $(".dev_layer1").animate({
      top: "0"
    }, 500);
    $(".dev_layer1").css({
      zIndex: "1"
    }, 500);
    click = 1;
  }
}

function dev_clicker2() {
  if (click) {
    $(".dev_layer2").animate({
      top: "-80px",
    }, 500);

    $(".dev_layer2").css({
      zIndex: "8"
    }, 500);
    click = 0;
  } else {
    $(".dev_layer2").animate({
      top: "0"
    }, 500);
    $(".dev_layer2").css({
      zIndex: "2"
    }, 500);
    click = 1;
  }
}