multi level dropdown jQuery

index.html

<div class="products-panel">
    <div class="container products-panel-wrap">
        <div class="products-sidebar">
            <div class="products-sidebar-panel">
                <span class="products-sidebar-title">Categories</span>
                <div class="products-sidebar-list">
                    <a href="javascript:;" class="products-sidebar-category">P.O.S / Kiosks</a>
                    <a href="javascript:;" class="products-sidebar-category">Clamps and Mounts</a>
                    <a href="javascript:;" class="products-sidebar-category">PC Accessories</a>
                </div>
            </div>
            <div class="products-sidebar-panel products-sidebar-panel--category">
                <span class="products-sidebar-title">Devices</span>
                <ul class="products-sidebar-list">
                    <li class="products-sidebar-item">
                        <span class="products-sidebar-item-title-wrap">
                            <a href="javascript:;" class="products-sidebar-item-title-text">Apple</a>
                            <span class="products-sidebar-item-title-icon font-plus"></span>
                        </span>
                        <ul class="products-sidebar-item-list">
                            <li>
                                <span class="products-sidebar-item-title-wrap">
                                    <a href="javascript:;" class="products-sidebar-item-title-text">iPads</a>
                                    <span class="products-sidebar-item-title-icon font-plus"></span>
                                </span>
                                <ul>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">iPad wow</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">iPad large</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">iPad mini</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">iPad ok</a></li>
                                </ul>
                            </li>
                            <li><a href="javascript:;" class="products-sidebar-item-link">iPods</a></li>
                            <li><a href="javascript:;" class="products-sidebar-item-link">iPhones</a></li>
                            <li><a href="javascript:;" class="products-sidebar-item-link">iMac</a></li>
                        </ul>
                    </li>
                    <li class="products-sidebar-item">
                        <a class="products-sidebar-item-title-wrap">
                            <span class="products-sidebar-item-title-text">Samsung</span>
                            <span class="products-sidebar-item-title-icon font-plus"></span>
                        </a>
                        <ul class="products-sidebar-item-list">
                            <li>
                                <a class="products-sidebar-item-title-wrap">
                                    <span class="products-sidebar-item-title-text">Galaxy</span>
                                    <span class="products-sidebar-item-title-icon font-plus"></span>
                                </a>
                                <ul>
                                    <li>
                                        <a class="products-sidebar-item-title-wrap">
                                            <span class="products-sidebar-item-title-text">Galaxy S1</span>
                                            <span class="products-sidebar-item-title-icon font-plus"></span>
                                        </a>
                                        <ul>
                                            <li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S1a</a>
												<ul>
													<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S1a0</a></li>
													<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S2b1</a></li>
													<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S3c2</a></li>
													<li><a href="javascript:;" class="products-sidebar-item-link">subSubGalaxy S4d3</a></li>
												</ul>
											</li>
                                            <li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S2b</a></li>
                                            <li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S3c</a></li>
                                            <li><a href="javascript:;" class="products-sidebar-item-link">subGalaxy S4d</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">Galaxy S2</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">Galaxy S3</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">Galaxy S4</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript:;" class="products-sidebar-item-link">PCs</a>
                                <ul>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">PC model 1</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">PC model 2</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">PC model 3</a></li>
                                    <li><a href="javascript:;" class="products-sidebar-item-link">PC model 4</a></li>
                                </ul>
                            </li>
                            <li><a href="javascript:;" class="products-sidebar-item-link">Laptops</a></li>
                            <li><a href="javascript:;" class="products-sidebar-item-link">Misc</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

multi-level-dropdown-jquery.markdown

multi level dropdown jQuery

A Pen by Milorad on CodePen.

License.

script.js

$('.products-sidebar-item-title-icon').on('click', function(e) {
			$(this).toggleClass('font-plus');
			$(this).toggleClass('font-minus');
			$(this).parent().next().slideToggle();
		});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

$white: #fff;
$black: #000;
$blue: #222f40;
$grey: #3d3e45;
$grey-light: #f4f8fb;
$grey-lighter: #efedee;
$red: #ff6363;

// Transitions
$dur: 350ms;
$ease: ease;
a {
  text-decoration: none;
  color: $grey;
}
.products-sidebar {
    max-width: 250px;
    width: 100%;
    margin-right: 15px;
}
.products-panel {
    padding-top: 140px;
    background-color: $grey-light;
}
.products-panel-wrap {
    display: flex;
}
.products-sidebar-panel {
    background-color: $white;
    padding: 10% 11% 5%;
    border-bottom: 1px solid $grey-light;
}
.products-sidebar-panel--category {
    padding: 6% 11% 7%;
    + .products-sidebar-panel--category {
        padding-top: 7%;
        .products-sidebar-title {
            margin-bottom: 20px;
        }
    }
}

.products-sidebar-title {
    display: block;
    margin-bottom: 30px;
    font-weight: 600;
    color: $grey;    
}
.products-sidebar-item, .products-sidebar-category {
    display: block;
    margin-bottom: 12px;
    transition: color $dur $ease;
    font-size: 14px;
    letter-spacing: -0.3px;
    &:hover {
        color: $red;   
    }
}
.products-sidebar-category {
    &:hover {
        font-weight: 600;
    }
}
.products-sidebar-item-title-wrap {
    position: relative;
    display: flex;
    &:hover {
        color: $red;
        .products-sidebar-item-title-icon {
            &::before {
                color: $red;
            }
        }
    }
}
.products-sidebar-item-title {
    display: block;
    color: $grey;
    transition: $dur $ease;
   
}
.products-sidebar-item-title-icon {
    display: inline-flex;
    margin-left: auto;
    &::before {
        color: $grey;
        font-size: 11px;
        transition: $dur $ease;
    }
}

.products-sidebar-item {
   ul {
        display: none;
        padding-left: 10px;
        margin-top: 20px;
        padding-bottom: 6px;
        margin-left: 10px;
        border-left: 2px solid $red;
        li {
            display: block;
            transition: $dur $ease;
            margin-bottom: 12px;
            &:hover {
                color: $red;
            }
        }
   }
}

.font-plus, .font-minus {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 30px;
    line-height: 1;
    &::before {
      font-size: 18px;
    }
	&:hover {
		cursor: pointer;
	}
}
.font-plus {
  &::before {
      content: '+';
    }
}
.font-minus {
    &::before {
        content: '-';
      }
}