JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="accordion incentivized">
  <div class="place_sometimes businesses_sprin active">
    <div class="executed_earch conten_concepts">Раздел 1</div>
    <div class="organic_traffic posite_organic">
      <div class="amounts_organic">
Любой, кто приходит на ваш сайт по ссылке на внешний веб-сайт, считается отправленным трафиком. Из-за характера Интернета это один из самых распространенных способов открытия людьми новых веб-сайтов. 
      </div>
      <div class="accordion incentivized">
        <div class="place_sometimes businesses_sprin">
          <div class="executed_earch conten_concepts">Под категория 1</div>
          <div class="organic_traffic posite_organic">
            <div class="amounts_organic">
Социальный трафик - это его собственная форма направления. С ростом и распространением социальных сетей в обществе он стал одним из основных методов, с помощью которых люди исследуют Интернет.
            </div>
          </div>
        </div>
        <div class="place_sometimes businesses_sprin">
          <div class="executed_earch conten_concepts">Под категория 2</div>
          <div class="organic_traffic posite_organic">
            <div class="amounts_organic">
Теперь, когда многие платформы социальных сетей предлагают возможности для продвигаемых должностей, социальный трафик может быть как органичным, так и платным.
            </div>
          </div>
        </div>
      </div>
     </div>
  </div>
  <div class="place_sometimes businesses_sprin">
    <div class="executed_earch conten_concepts">Шаблоны для сайта</div>
    <div class="organic_traffic posite_organic">
      <div class="amounts_organic">
Если вы консолидируете любую из своих страниц в более крупный центральный ресурс, обновите ссылки на своих страницах, чтобы они указывали на новые ресурсы, а не просто удаляли ссылки. Обратите внимание на эти изменения в копии обхода сайта.
      </div>
      <div class="accordion incentivized">
        <div class="place_sometimes...

CSS

body {
  font-size: 62.5%;
  background: #dadada;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}


.accordion {
  font-size: 1rem;
  width: 29vw;
  margin: 0 auto;
  border-radius: 3px;
}

.executed_earch,
.organic_traffic {
  background: white;
}

.executed_earch {
    padding: 1.4em 1.4em;
    background: #105773;
    text-transform: uppercase;
    color: #e8e8e8;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: .2em;
    transition: all .4s;
}

.executed_earch:hover {
    background: #0e385d;
    position: relative;
    z-index: 5;
}

.organic_traffic {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.amounts_organic {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.place_sometimes.active:last-child .executed_earch {
  border-radius: none;
}

.accordion:first-child>.place_sometimes>.executed_earch {
  border-bottom: 1px solid transparent;
}

.place_sometimes>.executed_earch:after {
  content: "▼";
  font-family: IonIcons;
  font-size: 1em;
  float: right;
  position: relative;
  top: -1px;
  transition: .1s all;
  transform: rotate(0deg);
}

.place_sometimes.active>.executed_earch:after {
  transform: rotate(-180deg);
}

.place_sometimes.active .executed_earch {
  background: #2D3D99;
}

.place_sometimes .place_sometimes .executed_earch {
    background: #c5deff;
    color: #171616;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  .accordion {
    width: 100%;
  }
}

JavaScript

var accordion = (function() {

  var $accordion = $('.incentivized');
  var $accordion_header = $accordion.find('.conten_concepts');
  var $accordion_item = $('.businesses_sprin');

  // default settings 
  var settings = {
    // animation speed
    speed: 400,

    // close all other accordion items if true
    oneOpen: false
  };

  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });

      $.extend(settings, $settings);

      // ensure only one accordion is active if oneOpen is true
      if (settings.oneOpen && $('.businesses_sprin.active').length > 1) {
        $('.businesses_sprin.active:not(:first)').removeClass('active');
      }

      // reveal the active accordion bodies
      $('.businesses_sprin.active').find('> .posite_organic').show();
    },
    toggle: function($this) {

      if (settings.oneOpen && $this[0] != $this.closest('.incentivized').find('> .businesses_sprin.active > .conten_concepts')[0]) {
        $this.closest('.incentivized')
          .find('> .businesses_sprin')
          .removeClass('active')
          .find('.posite_organic')
          .slideUp()
      }

      // show/hide the clicked accordion item
      $this.closest('.businesses_sprin').toggleClass('active');
      $this.next().stop().slideToggle(settings.speed);
    }
  }
})();

$(document).ready(function() {
  accordion.init({
    speed: 300,
    oneOpen: true
  });
});