JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading7">
      <a class="collapsed list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false"
        aria-controls="collapse7">Станки <i class="fa fa-angle-down" aria-hidden="true"></i></a>
    </div>
    <div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
      <a class="list-group-item" href="#">Плиткорезы</a>
      <a class="list-group-item" href="#">Пылесосы</a>
      <div class="panel-heading" role="tab" id="heading9">
        <a class="collapsed list-group-item" data-toggle="collapse" data-parent="#heading9" href="#collapse9" aria-expanded="false"
          aria-controls="collapse9">Станки металлообрабатывающие <i class="fa fa-angle-down" aria-hidden="true"></i></a>
      </div>
      <div id="collapse9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading9">
        <a class="list-group-item" href="#">Ленточные пилы</a>
        <a class="list-group-item" href="#">Токарные станки</a>
        <a class="list-group-item" href="#">Токарно-фрезерные станки</a>
        <a class="list-group-item" href="#">Фрезерные станки</a>
        <a class="list-group-item" href="#">Сверлильные станки на магнитной подошве</a>
        <div class="panel-heading" role="tab" id="heading10">
          <a class="collapsed list-group-item" data-toggle="collapse" data-parent="#heading10" href="#collapse10" aria-expanded="false"
            aria-controls="collapse10">Станочки <i class="fa fa-angle-down"...

CSS

.show {
  display: block;
}

JavaScript

$('.panel-collapse [data-toggle="collapse"]').on('click', function() {
  var $target = $(this).parents('.panel-collapse');
  $target.removeClass('in').addClass('show');
  setTimeout(function() {
    $target.removeClass('show').addClass('in');
  }, 10)
});