JSFiddle - React, Tailwind, and code Playground

HTML

<div class="groups-container">
    <div class="group opened a">a</div>
    <div class="group b">b</div> 
    <div class="group c">c</div>
</div>
<br>
<div class="content">
    <div class="container opened a">a</div>
    <div class="container b">b</div>
    <div class="container c">c</div>
</div>

CSS

.group { 
    height: 20px;
    background-color: green;
    border-bottom: 1px solid black;
}
.opened {
    background-color: red;
}

.content {
    height: 40px;
}

.container {
    display: none;
    background-color: green;
}

.container.opened {
    display: block;
    background-color: red;
}

JavaScript

$(function() {
  jGroup = $('.group');
  jContent = $('.content');  
  jGroup.on('click', function(event) {
    jThis = $(event.currentTarget);
    jGroup.removeClass('opened');
    jContent.find('.container').removeClass('opened');
    jThis.addClass('opened');
    if (jThis.hasClass('a')) {
      jContent.find('.container.a').addClass('opened');
    }
    if (jThis.hasClass('b')) {
      jContent.find('.container.b').addClass('opened');
    }
    if (jThis.hasClass('c')) {
      jContent.find('.container.c').addClass('opened');
    }
  });
});