Не получается реализовать свайпер, у которого будет несколько выпадающих меню и у подпунктов будут свои слайды.
const selection = document.querySelector('.products__selection');
const subparagraphBlock = document.querySelector('.products__subparagraphBlock');
let selectedTd;
selection.addEventListener('click', function(event) {
let target = event.target;
if (target === selection) {
return;
};
if (target.closest('.products__paragraphBlock')) {
target.classList.add('active');
};
if (target.matches('.products__paragraph')) {
subparagraphBlock.classList.remove('hidden');
};
highlight(target);
});
function highlight(td) {
if (selectedTd) {
selectedTd.classList.remove('active');
}
selectedTd = td;
selectedTd.classList.add('active');
}
.products .active {
background-color: #259cc1;
border-radius: 7px;
color: #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.products__paragraphBlock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.products__paragraph {
font-size: 24px;
}
.products__paragraph,
.products__subparagraph {
cursor: pointer;
padding: 5px 15px;
}
.products__subparagraphBlock {
margin: 0 10px 0 0;
border-right: 1px solid #333;
}
.products__subparagraph {
display: inline-block;
font-size: 18px;
color: #333;
}
.products .hidden {
display: none;
}
<div class="products__selection">
<div class="products__paragraphBlock">
<div class="products__paragraph">
Paragraph 1
</div>
<div class="products__subparagraphBlock hidden">
<div class="products__subparagraph">Subparagraph 1</div>
<div class="products__subparagraph">Subparagraph 2</div>
<div class="products__subparagraph">Subparagraph 3</div>
<div class="products__subparagraph">Subparagraph 4</div>
</div>
</div>
<div class="products__paragraphBlock">
<div class="products__paragraph">
Paragraph 2
</div>
<div class="products__subparagraphBlock hidden">
<div class="products__subparagraph">Subparagraph 1</div>
<div class="products__subparagraph">Subparagraph 2</div>
<div class="products__subparagraph">Subparagraph 3</div>
<div class="products__subparagraph">Subparagraph 4</div>
</div>
</div>
<div class="products__paragraphBlock">
<div class="products__paragraph">
Paragraph 3
</div>
<div class="products__subparagraphBlock hidden">
<div class="products__subparagraph">Subparagraph 1</div>
<div class="products__subparagraph">Subparagraph 2</div>
<div class="products__subparagraph">Subparagraph 3</div>
<div class="products__subparagraph">Subparagraph 4</div>
</div>
</div>
</div>