JSFiddle - React, Tailwind, and code Playground

HTML

<div class="office-holder">
<div class="office-row">
    <h3 class="office-title zaebal">Title</h3>
    <div class="office" style="display:block">sadasd</div>
  </div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</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;
}

JavaScript

$(function () {
    $('.office-title').click(function () {
    		var $this = $(this); 
        $this.addClass('zaebal').next('div').slideToggle();
        
        $this.parent().siblings().children().removeClass('zaebal').next().slideUp();
        return false;
    });
});