mobile menu plus-minues

index.html

<header class="header">

    <div class="menu-open">
        <i class="fas fa-bars"></i>
    </div>

    <div id="mobileMenu">
        <div class="menu-close">
            <i class="fas fa-times"></i>
        </div>
        <ul class="level-first">
            <li class="">
                <h5>Western Big Game
                    <i class="fas fa-plus"></i>
                    <i class="fas fa-minus"></i>
                </h5>
                <ul class="level-second">
                    <li class="">
                        <h5>Collections and Picks
                            <i class="fas fa-plus"></i>
                            <i class="fas fa-minus"></i>
                        </h5>
                        <ul class="level-third">
                            <li>
                                <h5>Collections</h5>
                                <ul class="link-list">
                                    <li><a href="javascript:">Pack Essentials</a></li>
                                    <li><a href="javascript:">Raingear </a></li>
                                    <li><a href="javascript:">Backcountry Insulation</a></li>
                                </ul>
                                <h5>Staff Systems</h5>
                                <ul class="link-list">
                                    <li><a href="javascript:">M's Western Rifle</a></li>
                                    <li><a href="javascript:">September Elk </a></li>
                                    <li><a href="javascript:">Spring Bear </a></li>
                                    <li><a href="javascript:">W's Western Rifle </a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h5>Men's
                            <i class="fas fa-plus"></i>
                            <i class="fas fa-minus"></i>
                        </h5>
                        <ul class="level-second">
                            <li>
                                <h5>Baselayer Tops and Bottoms</h5>
                                <ul class="link-list">
                                    <li><a href="javascript:">Pack Essentials</a></li>
                                    <li><a href="javascript:">Raingear </a></li>
                                    <li><a href="javascript:">Backcountry Insulation</a></li>
                                </ul>
                                <h5>Outerwear</h5>
                                <ul class="link-list">
                                    <li><a href="javascript:">Pack Essentials</a></li>
                                    <li><a href="javascript:">Raingear </a></li>
                                    <li><a href="javascript:">Backcountry Insulation</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><h5>Women's
                        <i class="fas fa-plus"></i>
                        <i class="fas fa-minus"></i>
                    </h5>
                        <ul class="level-second">
                            <li>
                                <h5>Baselayer Tops and Bottoms</h5>
                                <ul class="link-list">
                                    <li><a href="javascript:">Pack Essentials</a></li>
                                    <li><a href="javascript:">Raingear </a></li>
                                    <li><a href="javascript:">Backcountry Insulation</a></li>
                                </ul>
                                <h5>Logo Wear</h5>
                                <ul class="link-list">
                                    <li><a href="javascript:">Pack Essentials</a></li>
                                    <li><a href="javascript:">Raingear </a></li>
                                    <li><a href="javascript:">Backcountry Insulation</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <h5>Whitetail
                    <i class="fas fa-plus"></i>
                    <i class="fas fa-minus"></i>
                </h5>
                <ul class="level-second">
                    <li>
                        <h5>Collections</h5>
                        <ul class="link-list">
                            <li><a href="javascript:">Pack Essentials</a></li>
                            <li><a href="javascript:">Raingear </a></li>
                            <li><a href="javascript:">Backcountry Insulation</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <h5>Company
                    <i class="fas fa-plus"></i>
                    <i class="fas fa-minus"></i>
                </h5>
                <ul class="level-second">
                    <li>
                        <h5>Staff Systems</h5>
                        <ul class="link-list">
                            <li><a href="javascript:">M's Western Rifle</a></li>
                            <li><a href="javascript:">September Elk </a></li>
                            <li><a href="javascript:">Spring Bear </a></li>
                            <li><a href="javascript:">W's Western Rifle </a></li>
                        </ul>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
</header> <!--End of Header section-->

mobile-menu-plus-minues.markdown

mobile menu plus-minues

A Pen by MD Ashik on CodePen.

License.

script.js

 $('#mobileMenu li h5').on('click', function () {
        $(this).parent().toggleClass('open');
    });
    // Menu open and close
    $('.menu-open').on('click', function () {
        $('#mobileMenu').addClass('open');

    });
    $('.menu-close').on('click', function () {
        $('#mobileMenu').removeClass('open');
    });

scripts

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

style.css

/***** Google fonts *****/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    background-color: #ccc;
}

ul, ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu-open {
    padding: 5px;
    font-size: 30px;
    cursor: pointer;
    display: inline-block;
    float: right;
    margin: 20px 30px;
}

.menu-close {
    padding: 0;
    font-size: 35px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}

#mobileMenu {
    display: block;
    border-left: 2px solid #FF5722;
    width: 330px;
    position: fixed;
    top: 0;
    right: -350px;
    text-align: left;
    padding: 0;
    background-color: #fff;
    z-index: 99999;
    height: 100%;
    transition: right 0.4s ease-in-out;
    overflow-x: hidden;
    overflow-y: scroll;
}

#mobileMenu.open {
    right: 0;
}

#mobileMenu > ul {
    padding: 80px 0 0 20px;
}

#mobileMenu ul li h5 i,
#mobileMenu ul li h5 svg {
    float: right;
    margin: 5px 20px 0 0;
    font-size: 80%;
}

#mobileMenu ul li.open > h5 i.fa-plus,
#mobileMenu ul li.open > h5 svg.fa-plus,
#mobileMenu ul li h5 i.fa-minus,
#mobileMenu ul li h5 svg.fa-minus {
    display: none;
}

#mobileMenu ul li.open > h5 i.fa-minus,
#mobileMenu ul li.open > h5 svg.fa-minus {
    display: block;
}

#mobileMenu ul.level-first li {
    position: relative;
}

#mobileMenu ul.level-first > li {
    margin: 0 0 10px 0;
}

#mobileMenu ul li a {
    text-decoration: none;
    color: #333;
    padding: 5px 10px;
    display: block;
    cursor: pointer;
}

#mobileMenu ul li h5 {
    font-size: 14px;
    display: block;
    margin: 0 0 10px 0;
    color: #333;
    cursor: pointer;
}

#mobileMenu ul.level-first > li > h5 {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
}


#mobileMenu li ul.level-second {
    margin: 20px 0 0 20px;
    height: 0;
    display: none;
    transition: all .5s;
}

#mobileMenu li.open > ul.level-second {
    margin: 20px 0 0 20px;
    height: 100%;
    display: block;
}

#mobileMenu ul.level-second > li {
    margin-bottom: 5px;
}

#mobileMenu ul.level-second > li > h5 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;

}

#mobileMenu li ul.level-third {
    margin: 10px 0 0 20px;
    height: 0;
    display: none;
    transition: all .5s;
}

#mobileMenu li.open > ul.level-third {
    margin: 20px 0 0 20px;
    height: 100%;
    display: block;
}

#mobileMenu ul.level-third > li > h5 {
    font-weight: 600;
}

#mobileMenu ul.link-list {
    margin: -2px 0 10px 0;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0 0 5px 5px;
}

#mobileMenu ul.link-list h5 {
    cursor: default !important;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />