CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5236

smoothly open/close animation effect to list elements

I have list as in the picture below. Can someone advice me good examples with smoothly open/close animation effect by clicking ul li elements? For example when user clicks A it will be visible A.2 and A.1. Then when user clicks A.2 will be visible A.2.1 and A.2.2 etc.

List:

enter image description here

HTML:

<ul>
    <li>
        A
        <ul>
            <li>
                A.2
                <ul>
                    <li>
                        <label for="id_function_2">
                            <input id="id_function_2" name="function" value="" type="checkbox">
                            A.2.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_3">
                            <input id="id_function_3" name="function" value="" type="checkbox">
                            A.2.2
                        </label>
                    </li>
                </ul>
            </li>
            <li>
                A.1
                <ul>
                    <li>
                        <label for="id_function_0">
                            <input id="id_function_0" name="function" value="" type="checkbox">
                            A.1.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_1">
                            <input id="id_function_1" name="function" value="" type="checkbox">
                            A.1.2
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 0

Views: 1747

Answers (2)

Ranjeet Singh
Ranjeet Singh

Reputation: 924

Check this example snippet. This is just a showcase, you can play with animate slideToggle fadeToogle

$("ul a.toggle").click(function() {
  $(this).next("ul").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li>
        <a href="#" class="toggle">A</a>
        <ul>
            <li>
                <a href="#" class="toggle"> A.2</a>
                <ul>
                    <li>
                        <label for="id_function_2">
                            <input id="id_function_2" name="function" value="" type="checkbox">
                            A.2.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_3">
                            <input id="id_function_3" name="function" value="" type="checkbox">
                            A.2.2
                        </label>
                    </li>
                </ul>
            </li>
            <li>
               <a href="#" class="toggle"> A.1</a>
                <ul>
                    <li>
                        <label for="id_function_0">
                            <input id="id_function_0" name="function" value="" type="checkbox">
                            A.1.1
                        </label>
                    </li>
                    <li>
                        <label for="id_function_1">
                            <input id="id_function_1" name="function" value="" type="checkbox">
                            A.1.2
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 1

MikeyT
MikeyT

Reputation: 59

Your looking for something like accordion, just make your A.2 and A.1 the items you want to toggle.

https://www.w3schools.com/howto/howto_js_accordion.asp

Upvotes: 0

Related Questions