JSFiddle - React, Tailwind, and code Playground

HTML

<div class="office-holder">
  <div class="office-row">
    <h3 class="office-title zaebal">
     <img class="unactive" src="http://www.gelbooru.com/counter/1.gif">
     <img class="active" src="http://www.gelbooru.com/counter/2.gif">
    </h3>
    <div class="office-text">sadasd</div>
  </div>
  <div class="office-row">
    <h3 class="office-title">
     <img class="unactive" src="http://www.gelbooru.com/counter/3.gif">
     <img class="active" src="http://www.gelbooru.com/counter/4.gif">
    </h3>
    <div class="office-text">sadasd asdasd </div>
  </div>
  <div class="office-row">
    <h3 class="office-title">
     <img class="unactive" src="http://www.gelbooru.com/counter/5.gif">
     <img class="active" src="http://www.gelbooru.com/counter/6.gif">
    </h3>
    <div class="office-text">sadasd asdasd asdasda </div>
  </div>
</div>

CSS

.office {
  display: none;
}

.office-holder {
  border-left: 10px solid #CDCDCD;
}

.office-title {
  position: relative;
}

.office-title.zaebal:before {
  display: block;
  position: absolute;
  left: -9px;
  top: 5px;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  z-index: 10;
  background: red;
}

.office-title.zaebal .unactive,
.office-title .active {
  display: none
}

.office-title.zaebal .active {
  display: block
}

.office-text {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .5s ease-out;
}

.zaebal + .office-text {
  max-height: 300px;
}

JavaScript

$(function() {
  $('.office-title').click(function() {
    $('.office-holder').find('.zaebal').removeClass('zaebal');
    $(this).addClass('zaebal');
    return false;
  });
});