JSFiddle - React, Tailwind, and code Playground

by Andrey Kluev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div class="blc">
  <a href="#" class="btn">Click</a>
  <div class="class-1">
   бла-бла-бла
  </div>
</div>

<div class="blc">
  <a href="#" class="btn">Click</a>
  <div class="class-1">
   бла-бла-бла
  </div>
</div>

<div class="blc">
  <a href="#" class="btn">Click</a>
  <div class="class-1">
   бла-бла-бла
  </div>
</div>

CSS

.blc {
  height: 50px;
  background-color: gray;
  margin: 5px 0;
}

.blc a.btn {
  background: green;
  float: left;
  height: 30px;
  margin-right: -50px;
  padding: 10px;
  width: 30px;
}

.blc .class-1 {
  margin: 0 0 0 50px;
  padding: 10px;
}

.active {
  background-color: red;
}

JavaScript

$(document).ready(function() {
	$('a.btn').on('click', function() {
  	var obj = $(this).closest('.blc');
    obj.toggleClass('active');
  });
});