Суть вопроса - есть 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, но пока только учу.