0

Суть вопроса - есть 4 таба, к каждому относится определенный для него список вопросов, как сделать, чтобы при нажатии на определенный таб вылезал именно соответствующий ему список вопросов?

Код:

// Аккордеон-меню
$(document).ready(function() {
  $('.accordeon__trigger').on('click', function(e) {
    e.preventDefault();

    var $this = $(this),
      item = $this.closest('.accordeon__item'),
      list = $this.closest('.accordeon__list'),
      items = list.find('.accordeon__item'),
      content = item.find('.accordeon__inner'),
      otherContent = list.find('.accordeon__inner');
    duration = 300;

    if (!item.hasClass('active')) {
      items.removeClass('active');
      item.addClass('active');

      otherContent.stop(true, true).slideUp(duration);
      content.stop(true, true).slideDown(duration);
    } else {
      content.stop(true, true).slideUp(duration);
      item.stop(true, true).removeClass('active');
    }
  });
  // Question-controls
  $('.question__trigger').on('click', function(e) {
    e.preventDefault();

    var $this = $(this),
      questionItem = $this.closest('.questions__controls_item'),
      questionList = $this.closest('.questions__controls_list'),
      questionItems = questionList.find('.questions__controls_item');

    if (!questionItem.hasClass('active')) {
      questionItems.removeClass('active');
      questionItem.addClass('active');
    } else {
      questionItem.removeClass('active');
    }
  });
});
.main__questions_inner:after {
  content: "";
  display: table;
  clear: both;
}

.main__questions_inner:before {
  content: "";
  display: table;
}

.questions__controls_list {
  text-align: center;
  margin-bottom: 30px;
}

.questions__controls_item {
  color: #1b1b1b;
  width: 120px;
  cursor: pointer;
  height: 120px;
  margin: 0 5px;
  display: inline-block;
  position: relative;
  font-size: 14px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(27, 27, 27, 0.06);
  box-sizing: border-box;
  transition: all 0.15s ease-in-out, color;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 8px;
  vertical-align: middle;
}

.questions__controls_item:before {
  content: "";
  border: 10px solid transparent;
  transition: border-color 0.15s ease;
  position: absolute;
  left: calc(50% - 10px);
}

.questions__controls_item:hover {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.1);
}

.questions__controls_item.active {
  box-shadow: none;
  background: #44c373;
  border-color: #44c373;
  color: #fff;
}

.questions__controls_item.active:before {
  content: "";
  bottom: -19px;
  transition-delay: unset;
  border: 10px solid transparent;
  border-top-color: #44c373;
  transition: border-color 0.15s ease;
  left: calc(50% - 10px);
}

.questions__controls_icon {
  width: 25px;
  height: 25px;
  margin: 25px 0 9px;
  display: inline-block;
}

.questions__controls_icon i {
  font-size: 18px;
  color: #1b1b1b;
}

.questions__controls_item.active i {
  color: #fff;
}

.questions__controls_title {
  height: 41px;
  color: #000;
  font-family: "MuseoSansBold", Arial, Helvetica, sans-serif;
}

.main__question_table {
  display: inline-block;
  text-align: center;
  width: 70%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.general__question_list {
  list-style: none;
}

.general__question_item {
  display: none;
  list-style: none;
}

.general__question_item.active {
  display: block;
}

.main__question__list {
  list-style: none;
}

.main__question_item {
  list-style: none;
  background: #ffffff;
  position: relative;
  border-radius: 5px 5px 0 0;
}

.main__questions_inner {
  border-bottom: 1px solid #cacbcb;
  cursor: pointer;
  color: #9b9b9b;
  transition: all 0.5s ease;
}

.main__questions_inner:hover {
  color: #44c373;
}

.main__question_title {
  float: left;
  width: 90%;
  text-align: left;
  padding: 20px;
  font-family: "MuseoSansBold", Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.main__question_arrow {
  width: 10%;
  font-size: 16px;
  float: right;
  margin-top: 21px;
}

.main__question_answer {
  color: #4a4a4a;
  margin: 0;
  padding: 12px 19px 43px;
  font-family: "MuseoSansBold", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
  border-bottom: 1px solid #cacbcb;
  text-align: justify;
  display: none;
  background: #e8e8e8;
}

.main__question_answer.active {
  display: block;
}

.main__question_item.active .main__questions_inner {
  color: #2d8d51;
}

@media (max-width: 768px) {
  .main__question_table {
    width: 85%;
  }
  .main__question_title {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .questions__controls_item {
    margin-bottom: 10px;
  }
  .questions__controls_item.active:before {
    display: none;
  }
  .main__question_table {
    width: 90%;
  }
  .main__question_title {
    width: 85%;
  }
  .main__question_arrow {
    width: 15%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section__content">
  <ul class="questions__controls_list">
    <li class="questions__controls_item question__trigger active"><span class="questions__controls_icon"><i class="fa fa-lemon-o"></i></span>
      <h3 class="questions__controls_title">Продукты</h3>
    </li>
    <li class="questions__controls_item question__trigger"><span class="questions__controls_icon"><i class="fa fa-balance-scale"></i></span>
      <h3 class="questions__controls_title">Программы</h3>
    </li>
    <li class="questions__controls_item question__trigger"><span class="questions__controls_icon"><i class="fa fa-rub"></i></span>
      <h3 class="questions__controls_title">Оплата и доставка</h3>
    </li>
    <li class="questions__controls_item question__trigger"><span class="questions__controls_icon"><i class="fa fa-snowflake-o"></i></span>
      <h3 class="questions__controls_title">Хранение</h3>
    </li>
  </ul>
  <div class="main__question_table">
    <ul class="general__question_list">
      <li class="general__question_item active">
        <ul class="main__question__list accordeon__list">
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Вопросы из темы продукты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же
              короткий текст.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi
              incidunt?
            </p>
          </li>
        </ul>
      </li>
      <li class="general__question_item">
        <ul class="main__question__list accordeon__list">
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Вопросы из темы программы</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же
              короткий текст.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi
              incidunt?
            </p>
          </li>
        </ul>
      </li>
      <li class="general__question_item">
        <ul class="main__question__list accordeon__list">
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Вопросы из темы оплата и доставка</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же
              короткий текст.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi
              incidunt?
            </p>
          </li>
        </ul>
      </li>
      <li class="general__question_item">
        <ul class="main__question__list accordeon__list">
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Вопросы из темы хранение</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же
              короткий текст.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
          </li>
          <li class="main__question_item accordeon__item">
            <div class="main__questions_inner accordeon__trigger">
              <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
            </div>
            <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi
              incidunt?
            </p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Пример кода тут.

В идеале в верстке ничего не изменять.
Я понимаю что это js, но пока только учу.

1 ответ 1

1

Нашел решение. Может кому пригодится. Доработан js и добавлены data в html код. Код html:

<div class="section__content">
    <ul class="questions__controls_list">
        <li class="questions__controls_item question__trigger active" data-tab="product"><span class="questions__controls_icon"><i class="fa fa-lemon-o"></i></span>
            <h3 class="questions__controls_title">Продукты</h3>
        </li>
        <li class="questions__controls_item question__trigger" data-tab="program"><span class="questions__controls_icon"><i class="fa fa-balance-scale"></i></span>
            <h3 class="questions__controls_title">Программы</h3>
        </li>
        <li class="questions__controls_item question__trigger" data-tab="pay"><span class="questions__controls_icon"><i class="fa fa-rub"></i></span>
            <h3 class="questions__controls_title">Оплата и доставка</h3>
        </li>
        <li class="questions__controls_item question__trigger" data-tab="store"><span class="questions__controls_icon"><i class="fa fa-snowflake-o"></i></span>
            <h3 class="questions__controls_title">Хранение</h3>
        </li>
    </ul>
    <div class="main__question_table">
        <ul class="general__question_list">
            <li class="general__question_item active">
                <ul class="main__question__list accordeon__list" data-tab="product">
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Вопросы из темы продукты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же короткий текст.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi incidunt?</p>
                    </li>
                </ul>
            </li>
            <li class="general__question_item">
                <ul class="main__question__list accordeon__list" data-tab="program">
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Вопросы из темы программы</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же короткий текст.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi incidunt?</p>
                    </li>
                </ul>
            </li>
            <li class="general__question_item">
                <ul class="main__question__list accordeon__list" data-tab="pay">
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Вопросы из темы оплата и доставка</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же короткий текст.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi incidunt?</p>
                    </li>
                </ul>
            </li>
            <li class="general__question_item">
                <ul class="main__question__list accordeon__list" data-tab="store">
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Вопросы из темы хранение</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Тут будет какой-то текст, а этот исключительно для того, чтобы посмотреть как будет отображаться шрифт, читаем ли будет цвет и вообще посмотреть, как это будет выглядеть. Длинна текста средняя, чтобы понимать как будет виден длинный или же короткий текст.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какое мясо вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ipsam dolor facere doloribus, autem corrupti est magni incidunt rerum eveniet sunt officia et eos iste quos deleniti. Ducimus possimus inventore reprehenderit quidem quasi optio aliquam saepe itaque autem. Totam.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Какие молочные продукты вы используете для приготовления блюд?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Quod, similique fuga nesciunt consequatur nemo, debitis deserunt tempore maxime minus quo assumenda nam asperiores neque cum voluptatibus facilis tenetur? Blanditiis illo totam rem odio. Fuga nam consequuntur illo expedita.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Полезное питание - это вкусно?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Ut, commodi esse fugit iusto eligendi doloremque? Aliquam autem reiciendis beatae eius nulla, dolore modi similique iste officia! Porro temporibus officia suscipit quas distinctio. Dolor quo quia odio hic quod.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Нужно ли мне считать калории, соблюдая вашу диету?</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Rerum, labore quaerat, sed doloribus, ut qui soluta esse enim tempora possimus commodi eum veniam. Debitis, quasi suscipit! Molestias dolores architecto ea assumenda incidunt magnam sed, voluptate quod doloribus pariatur.</p>
                    </li>
                    <li class="main__question_item accordeon__item">
                        <div class="main__questions_inner accordeon__trigger">
                            <h4 class="main__question_title">Есть ли в вашем меню десерты</h4><i class="fa fa-chevron-down main__question_arrow"></i>
                        </div>
                        <p class="main__question_answer accordeon__inner">Expedita, praesentium rerum nulla nobis maxime laudantium tenetur veritatis, tempora alias necessitatibus reiciendis exercitationem. Enim officia ipsum animi, adipisci totam ipsa perspiciatis numquam, nobis nisi molestiae ad laudantium sequi incidunt?</p>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Код scss:

%clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
    &:before {
        content: "";
        display: table;
    }
}

.questions__controls_list {
  text-align: center;
  margin-bottom: 30px;
}

.questions__controls_item {
  color: #1b1b1b;
  width: 120px;
  cursor: pointer;
  height: 120px;
  margin: 0 5px;
  display: inline-block;
  position: relative;
  font-size: 14px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(27,27,27,.06);
  box-sizing: border-box;
  transition: all .15s ease-in-out,color;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 8px;
  vertical-align: middle;
  &:before {
    content: "";
    border: 10px solid transparent;
    transition: border-color .15s ease;
    position: absolute;
    left: calc(50% - 10px);
  }
  &:hover {
    box-shadow: 0 3px 4px 0 rgba(0,0,0,.1), 0 3px 4px 0 rgba(0,0,0,.1);
  }
}
.questions__controls_item.active {
  box-shadow: none;
  background: #44c373;
  border-color: #44c373;
  color: #fff;
    &:before {
      content: "";
      bottom: -19px;
      transition-delay: unset;
      border: 10px solid transparent;
      border-top-color: #44c373;
      transition: border-color .15s ease;
      left: calc(50% - 10px);
    }
}

.questions__controls_icon {
  width: 25px;
  height: 25px;
  margin: 25px 0 9px;
  display: inline-block;
  & i {
    font-size: 18px;
    color: #1b1b1b;
  }
}

.questions__controls_item.active i {
  color: #fff;  
}

.questions__controls_title {
  height: 41px;
  color: #000;
  font-family: "MuseoSansBold", Arial, Helvetica, sans-serif;
}

// ==================================
// ============= Список =============
// =========================

.main__question_table {
  display: inline-block;
  text-align: center;
  width: 70%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.1), 0 2px 4px 0 rgba(0,0,0,.1);
  border-radius: 4px;
}

.general__question_list {
  list-style: none;
}

.general__question_item {
  display: none;
  list-style: none;
  &.active {
    display: block;
  }
}

.main__question__list {
  list-style: none;
}

.main__question_item {
  list-style: none;
  background: #ffffff;
  position: relative;
  border-radius: 5px 5px 0 0;
}
.main__questions_inner {
  @extend %clearfix;
  border-bottom: 1px solid #cacbcb;
  cursor: pointer;
  color: #9b9b9b;
  transition: all 0.5s ease;
  &:hover {
    color: #44c373;
  }
}

.main__question_title {
  float: left;
  width: 90%;
  text-align: left;
  padding: 20px;
  font-family: "MuseoSansBold", Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.main__question_arrow {
  width: 10%;
  font-size: 16px;
  float: right;
  margin-top: 21px;
}

.main__question_answer {
  color: #4a4a4a;
  margin: 0;
  padding: 12px 19px 43px;
  font-family: "MuseoSansBold", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
  border-bottom: 1px solid #cacbcb;
  text-align: justify;
  display: none;
  background: #e8e8e8;
  &.active {
    display: block;
  }
}

.main__question_item.active {
    & .main__questions_inner {
    color: #2d8d51;
  }
}

@media (max-width: 768px) {
  .main__question_table {
    width: 85%;
  }
  .main__question_title {
    font-size: 16px;
  }
}
@media (max-width: 640px) {
  .questions__controls_item {
    margin-bottom: 10px;
  }
  .questions__controls_item.active {
    &:before {
      display: none;
    }
  }
  .main__question_table {
    width: 90%;
  }
  .main__question_title {
    width: 85%;
  }
  .main__question_arrow {
    width: 15%;
  }
}

Код js:

// Аккордеон-меню
$(document).ready(function(){
    $('.accordeon__trigger').on('click', function(e){
        e.preventDefault();

        var $this = $(this),
        item = $this.closest('.accordeon__item'),
        list = $this.closest('.accordeon__list'),
        items = list.find('.accordeon__item'),
        content = item.find('.accordeon__inner'),
        otherContent = list.find('.accordeon__inner');
        duration = 300;

        if (!item.hasClass('active')) {
            items.removeClass('active');
            item.addClass('active');

            otherContent.stop(true, true).slideUp(duration);
            content.stop(true, true).slideDown(duration);
        } else {
            content.stop(true,true).slideUp(duration);
            item.stop(true,true).removeClass('active');
        }
    });
});

// Question-controls
$(document).ready(function(){
    $('.question__trigger').on('click', function(e){
        e.preventDefault();

        var $this = $(this),
        questionItem = $this.closest('.questions__controls_item'),
        questionList = $this.closest('.questions__controls_list'),
        questionItems = questionList.find('.questions__controls_item'),
        tab = $(this).data('tab');


        $('.accordeon__list[data-tab!="'+ tab +'"]').hide();
        $('.general__question_item').removeClass('active');
        $('.accordeon__list[data-tab="'+ tab +'"]').show().parents('.general__question_item').addClass('active');

        if (!questionItem.hasClass('active')) {
            questionItems.removeClass('active');
            questionItem.addClass('active');
        } else {
            questionItem.removeClass('active');
        } 
    });
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.