jQuery addClass example

SlideToggle

by Tamil

HTML

<ul class="toggleContent">
        <li class="test" target="1">Test1
            <ul id="slide1" class="subContent">
                <li><a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_gt" target="_blank">Subt Test1</a></li>
                <li><a href="#" target="_blank">Subt Test2</a></li>
                <li><a href="#" target="_blank">Subt Test3</a></li>
            </ul>
        </li>
        <li class="test" target="2">Test2

                <ul id="slide2" class="subContent">
                        <li><a href="#" target="_blank">Subt Test3</a></li>
                        <li><a href="#" target="_blank">Subt Test4</a></li>
                        <li><a href="#" target="_blank">Subt Test5</a></li>
                    </ul>
        </li>
        <li>Test3</li>
        <li>Test4</li>
    </ul>

CSS

.subContent{display:none;}

JavaScript

$(function () {
            $('.toggleContent > .test').click(function () {
           
        var index = $(this).index();
        var newTarget = $('.subContent').eq(index);
            $('.subContent').not(newTarget).slideUp('slow')
        newTarget.delay('fast').slideToggle('slow')
        //return false;
        }),
        $(".subContent").click(function(event){
        event.stopPropagation();
        }); 
});