hy all, I am creating an accordion menu that when i press the " UNIT " tab, it opens up a list of " Chapters " tab, and when i press on any one of those chapters, a list of lessons opens up. Till now, i have managed to create all the appropriate lists, but in default, lessons and chapters are opened automatically, and the lessons elements when pressed do not scroll back up to the chapters parents. My html5 file:
Code:
<script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#accordion').accordion();
    });
</script>

<div id="container">
<div id="content">
<div id="sidebar">
        <ul id="accordion">
            <li>
                <a href="#recent" class="heading">Unit 1</a>    
                    <ul id="accordion">             
                        <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                                <ul id="accordion2">
                                    <li> Lesson 1 </li>
                                </ul>
                    </ul>
                    </li>
                    <li>
                    <a href="#recent" class="heading">Unit 2</a>    

                    <ul id="accordion">             
                        <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                                <ul id="accordion">
                                    <li> <a href="#recent" class="heading" role="tab" aria-expanded="true">Chapter 2 </a>
                                        <ul id="accordion">
                                            <li> <a href="#recent" class="heading">Lesson 1 </a></li>
                                        </ul>
                                    </li>
                                </ul>
                    </ul>
            </li>
        </ul>       
    </div>
    </div>
</div>



My acorjs.js file:

Code:
$(document).ready(function() {
    $('ul#accordion a.heading').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('current')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
                $.scrollTo('#accordion',1000);

            });
        } else {
            $('ul#accordion li.current ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('current');
            });
            $.scrollTo('#accordion',1000);

        }
        return false;

    });

});
Please HELP!