jQuery toggleClass example

Toggle class name on click in jQuery

by kawsarhamid

HTML

<ul id="myUL">
        <div class="menu-text">
            <li>
                <span class="caret treeparent ripple">Menu 1<i class="fas fa-chevron-down arrow"></i></span>
                <ul class="nested nav nav-pills flex-column tog">
                    <li class="nav-item" data-rel="data-rel">
                        <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:window.location.reload(true">Sub 2</a>
                    </li>
                </ul>
            </li>
            <li>
                <span class="caret treeparent ripple">Menu 2<i class="fas fa-chevron-down arrow"></i></span>
                <ul class="nested nav nav-pills flex-column tog">
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
                    </li>
                </ul>
            </li>
        </div>
    </ul>

CSS

ul,
        #myUL {
            list-style-type: none;
        }

        #myUL {
            margin: 0;
            padding: 0;
        }

        .caret {
            cursor: pointer;
            -webkit-user-select: none;
            /* Safari 3.1+ */
            -moz-user-select: none;
            /* Firefox 2+ */
            -ms-user-select: none;
            /* IE 10+ */
            user-select: none;
            font-size: 17px;
        }

        .arrow {
            margin-right: 9px;
            float: right;
            vertical-align: middle;
            padding: 4px;
        }

        .caret-down::before {
            -ms-transform: rotate(180deg);
            /* IE 9 */
            -webkit-transform: rotate(180deg);
            /* Safari */
            transform: rotate(180deg);
        }

        .nested {
            display: none;
            margin: 10px;
        }

        .active {
            display: block;
        }

        .treeparent {
            display: table-cell;
            overflow: auto;
            max-width: 350px;
            max-height: 350px;
            margin: auto;
            height: 35px;
            /* font-family: sans-serif; */
            font-size: 12.8px;
            color: #007BFF;
            margin: 3px;
            width: 260px;
            vertical-align: middle;
            padding: 2px;
        }

        .treeparent:hover {
            background-color: #cee0f5;
            color: black;
            transition: background 0.5s;
        }

        .arrow {
            -moz-transition: transform 0.6s;
            -webkit-transition: transform 0.6s;
            transition: transform 0.6s;
        }

        .flip {
            transform: rotate(-180deg);
        }

        .ripple {
            background-position: center;
        }

        .ripple:hover {
            background: #cee0f5 radial-gradient(circle, transparent 5%, #a8cdf7 1%) center/15000%;
        }

        .ripple:active {
           ...

JavaScript

var openedTreeLiIndex = JSON.parse(localStorage.getItem('openedTreeLiIndex')) || [];
        restoreOpenedTreeIndex();
        $(".treeparent").click(function () {
            var $tog = $(this).next('.tog');
            $tog.slideToggle();
            if ($tog.hasClass('open')){
                $tog.removeClass('open');
            }else{
                $tog.addClass('open');
            }
            $(".arrow", this).toggleClass('flip');
            storeOpenTreeIndex();
        });

        function storeOpenTreeIndex() {
            var liItems = $('.menu-text > li');
            var counter = liItems.length;
            $(liItems).each(function (index, li) {
                var nestedUl = $(li).find('ul.open');
                if (nestedUl.length > 0) {
                    if (openedTreeLiIndex.indexOf(index) === -1) {
                        openedTreeLiIndex.push(index);
                    }
                } else {
                    openedTreeLiIndex = openedTreeLiIndex.filter(function (item) { return item !== index; });
                }

                if (!--counter){
                    localStorage.setItem('openedTreeLiIndex', JSON.stringify(openedTreeLiIndex));
                }
            });
        }

        function restoreOpenedTreeIndex() {
            var liItems = $('.menu-text > li');
            var counter = liItems.length;
            $(liItems).each(function (index, li) {
                if (openedTreeLiIndex.indexOf(index) !== -1) {
                    $(li).find('ul').addClass('open').css({ display: 'block' });
                }
            });
        }