JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<ul class="faq__accordion accordion">
  <li class="left-column">
    <ul class="column__item">
      <li class="accordion__item accordion__item-1">
        <p class="accrodion-submenu__link accrodion__heading">
          Как сделать заказ цветов?
        </p>
        <ul class="accordion-submenu accordion-submenu accrodion__wrapper">
          <li>
            <p class="accrodion__desc">
              Мы предлагаем 3 способа оформления заказа:Вы можете купить у нас букет, добавив его в корзину и оформив заказ через
              сайт, написав нам в чат или позвонив по номеру 8 905 89 89 227.
            </p>
            <a href="#" class="accrodion__link">
              Подробнее...
            </a>
          </li>
        </ul>
      </li>

      <!-- /.accrodion__item-1 -->

      <li class="accordion__item accordion__item-3">
        <p class="accrodion-submenu__link accrodion__heading">
          Как сделать заказ цветов?
        </p>
        <ul class="accordion-submenu accrodion__wrapper">
          <li>
            <p class="accrodion__desc">
              Мы предлагаем 3 способа оформления заказа:Вы можете купить у нас букет, добавив его в корзину и оформив заказ через
              сайт, написав нам в чат или позвонив по номеру 8 905 89 89 227.
            </p>
            <a href="#" class="accrodion__link">
              Подробнее...
            </a>
          </li>
        </ul>
      </li>

      <!-- /.accrodion__item-3 -->

      <li class="accordion__item accordion__item-5">
        <p class="accrodion-submenu__link accrodion__heading">
          Как сделать заказ цветов?
        </p>
        <ul class="accordion-submenu accrodion__wrapper">
          <li>
            <p class="accrodion__desc">
              Мы предлагаем 3 способа оформления заказа:Вы можете купить у нас букет, добавив его в корзину и оформив заказ через
              сайт, написав нам в чат или позвонив по номеру 8 905 89 89 227.
            </p>
            <a href="#"...

SCSS

.faq__accordion {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30px auto;
  border-radius: 4px;

  .left-column, .right-column {
    flex-basis: 47.72%;
  }

  .accordion__item {
    flex-basis: 47.72%;
    width: 100%;
    margin-bottom: 10px;

    .accrodion__heading {
      position: relative;
      display: block;
      height: 45px;
      padding: 15px 15px 15px 45px;
      font-weight: bold;
      line-height: 19px;
      background: #F8F8F8;
      cursor: pointer;
      transition: all 0.4s ease-out;
    }

    .accrodion__wrapper {
      display: none;
      padding: 14px 20px;
      line-height: 20px;
      background: #F8F8F8;

      .accordion__link {
        color: #448370;
      }
    }

    &.open {
      .accrodion__heading {
        color: #fff;
        background: #448370;
      }
    }
  }
}

JavaScript

$(function() {
    var customAcco = function(el, multiple) {
      this.el = el || {};

      this.multiple = multiple || false;

      var dropdownlink = this.el.find('.accrodion-submenu__link');
      dropdownlink.on('click', {
        el: this.el,
        multiple: this.multiple
      }, this.dropdown);
    };

    customAcco.prototype.dropdown = function(e) {
      var $el = e.data.el,
        $this = $(this),
        $next = $this.next();

      $next.slideToggle();
      $this.parent().toggleClass('open');

      if (!e.data.multiple) {
        $el.find('.accordion-submenu').not($next).slideUp().parent().removeClass('open');
      }
    }

    var customAcco = new customAcco($('.accordion'), false);
  });