Какие есть плагины или готовое решение чтобы сделать аккордеон на подобие как в макете?

Рейтинг: -1Ответов: 1Опубликовано: 10.04.2023

:) Подскажите пожалуйста, какие есть плагины или готовое решение, чтобы сделать аккордеон на подобие как в этом макете который ниже на скриншоте?

аккордеон

Ответы

▲ 1Принят

Дружище, я не стал заморачиваться со стилями, надеюсь сам доделаешь?

(function ($) {
  $(document).ready(function () {
      $('.accordeon-label').each(function () {
          if ($(this).hasClass('opened')) {
              $('.accordeon-content', this).show();
          }
      });
  });

  $('.accordeon-label').on('click', function () {
      $(this).toggleClass('opened');
      $('.accordeon-content', this).toggle(300);
      if ($(this).hasClass('opened')) {
          $(this).siblings().removeClass('opened');
          $(this).siblings().children('.accordeon-content').hide(300);
      }
  });
})(jQuery);
.blockFaq .accorderon-box {
  border-top: 1px solid #222222;
  margin-top: 50px;
}

.blockFaq .accordeon-label {
  font-size: 24px;
  line-height: 34px;
  color: black;
  border-bottom: 1px solid #222222;
  padding: 35px 0;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.blockFaq .accordeon-label.opened span.crest {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.blockFaq .accordeon-label:before,
.blockFaq .accordeon-label:after {
  content: none;
}

.blockFaq .accordeon-label span {
  position: absolute;
  top: 23px;
  right: 0;
  width: 58px;
  height: 58px;
  display: block;
}

.blockFaq .accordeon-label span.crest {
  z-index: 20;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.blockFaq .accordeon-label span.crest:before,
.blockFaq .accordeon-label span.crest:after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 28px;
  right: 8px;
}

.blockFaq .accordeon-label span.crest:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.blockFaq .accordeon-label span.crest-bg {
  background: #9C4592;
  border-radius: 50%;
  z-index: 10;
}

.blockFaq .accordeon-label .accordeon-content {
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 0;
  margin-top: 38px;
  line-height: 23px;
}
.accorderon-box .accordeon-label .accordeon-content {
  display: none;
  color: initial;
  font-weight: initial;
  font-size: 16px;
  padding: 10px;
  -webkit-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.4);
  width: 100% !important;
  border-radius: 7px;
  box-sizing: border-box;
}

.accorderon-box .accordeon-label .accordeon-content p {
  margin: 0 0 10px;
}
<div class="blockFaq">
  <div class="accorderon-box">
      <div class="accordeon-label opened">Что такое «Облачное хранение»?<span class="crest"></span><span class="crest-bg"></span>
          <div class="accordeon-content">
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
          </div>
        </div>
      <div class="accordeon-label">Упаковочные материалы и демонтаж мебели<span class="crest"></span><span class="crest-bg"></span>
        <div class="accordeon-content">
          <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
          <p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
          <p>Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
        </div>
      </div>
      <div class="accordeon-label">Тарифы и условия доставки<span class="crest"></span><span class="crest-bg"></span>
        <div class="accordeon-content">
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
          <p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
        </div>
      </div>
      <div class="accordeon-label">Какую мебель можно хранить на складе?<span class="crest"></span><span class="crest-bg"></span>
        <div class="accordeon-content">
          <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
          <p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
        </div>
      </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>