JSFiddle - React, Tailwind, and code Playground

by YulyaYulya

HTML

<div class="ads">
     <div class="container">
       <div class="ads__submit">
         <ul class="ads__tabs">
           <li class="ads__tab">
             <button class="ads__category ads__category-active" data-tabs-path="one">Таб 1</button>
             <div class="pinned">
             </div>
           </li>
           <li class="ads__tab">
             <button class="ads__category" data-tabs-path="two">Таб 2</button>
             <div class="pinned"></div>
           </li>
           <li class="ads__tab">
             <button class="ads__category" data-tabs-path="three">Таб 3</button>
             <div class="pinned"></div>
           </li>
           <li class="ads__tab">
             <button class="ads__category" data-tabs-path="four">Таб 4</button>
             <div class="pinned"></div>
           </li>
         </ul>
         <div class="ads__block">
           <ul class="ads__menu ads__menu-active" data-tabs-target="one">
             <li class="ads__li"><a class="ads__list-link" href="#">кот</a></li>
             <li class="ads__li"><a class="ads__list-link" href="#">собака</a></li>
             <li class="ads__li"><a class="ads__list-link" href="#">жираф</a></li>
             <li class="ads__li">
               <span class="ads__list-link ads__greey">Здания</span>
               <ul class="ads__subcategory-ol">
                            <li class="ads__li"><a class="ads__list-link" href="#">высотки</a></li>
             <li class="ads__li"><a class="ads__list-link" href="#">дома</a></li>
                 <li class="ads__li">
                   <span class="ads__list-link ads__greey">Школа</span>
                   <ul class="ads__subcategory-ol">
                     <li class="ads__li"><a class="ads__list-link" href="#">Средняя</a></li>
                     <li class="ads__li"><a class="ads__list-link" href="#">Общеобразовательная</a></li>
                     <li class="ads__li"><a class="ads__list-link" href="#">Профильная</a></li>
           ...

SCSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
html {
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
}
.container {
    max-width: 1510px;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0 15px;
}
ul,
ol {
    text-decoration: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
.ads {
    margin-top: 80px;
    &__menu {
        height: 500px;
        width: 100%;
        column-width: 240px;
        column-gap: 0;
        column-fill: auto;
        display: none;
        &-active {
            display: block;
        }
    }
    &__block {
        border-left: 1px solid #e0e0e0;
        padding-left: 15px;
    }
    &__tabs {
        max-width: 200px;
        padding-right: 15px;
        width: 100%;

        height: 100%;
    }
    &__submit {
        display: flex;
    }
    &__tab {
        margin-top: 20px;
        &:first-child {
            margin-top: 0;
        }
    }
    &__category {
        font-weight: normal;
        font-size: 20px;
        line-height: 150%;
        color: #404040;
        position: relative;
        padding-left: 80px;
        background-color: transparent;
        border: none;
        padding: 15px 30px 15px 80px;
        cursor: pointer;
        &::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            border: 2px solid #bdbdbd;
            box-sizing: border-box;
            border-radius: 50%;
            left: 30px;
        }
        &-active {
            background-color: #008500;
            border-radius: 25px;
            color: #fff;
            max-width: 370px;
            width: 100%;
            text-align: left;
            &::before {
                border: 2px solid #fff;
            }
        }
    }
    &__li {
       ...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelector('.ads__submit');
    const tabsBtn = document.querySelectorAll('.ads__category');
    const tabsContent = document.querySelectorAll('.ads__menu');
    const subTab = document.querySelectorAll('.ads__list-link');
    const ul = document.querySelector('.ads__subcategory-ol');
    const pinned = document.querySelector('.pinned');
    const li = document.querySelectorAll('.ads__li');
//переключение табов
    tabs.addEventListener('click', e => {
        if (e.target.classList.contains('ads__category')) {
            const tabsPath = e.target.dataset.tabsPath;
            tabsHandler(tabsPath);
        }
    })
    const tabsHandler = (path) => {
        tabsBtn.forEach(el => { el.classList.remove('ads__category-active') });
        document.querySelector(`[data-tabs-path="${path}"]`).classList.add('ads__category-active');

        tabsContent.forEach(el => { el.classList.remove('ads__menu-active')});
        document.querySelector(`[data-tabs-target="${path}"]`).classList.add('ads__menu-active');
    }
// открытие вложенных списков
    for (let i = 0; i < li.length; i++) {
        li[i].addEventListener('click', showLi);

    }

    function showLi() {
        if (this.children.length > 1) {
            this.children[1].classList.add('ads__subcategory-active');
           
        } else {
            return false
        }
    }
})