toggle menu

by Павел KLON

HTML

<ul class="toggle_list">
    <li>Пункт1
        <div>text text text</div>
    </li>
    <li>Пункт2
        <div>text text text</div>
    </li>
    <li>Пункт3
        <div>text text text</div>
    </li>
</ul>

CSS

.toggle_list {}
        .toggle_list li {
            cursor: pointer;
            background-color: #fff;
            list-style-image: url(images/inactive_arrow.gif);
        }
        .toggle_list li > div {
            display: none;
        }
        .toggle_list .active {
            background-color: #e7e7e7;
            list-style-image: url(images/active_arrow.gif);
        }

JavaScript

$(document).ready(function(){
            $('.toggle_list').on('click','li',function(){
                var e = $(this);
                e
                    .toggleClass('active')
                    .find('div')
                    .slideToggle()
                    .end()
                    .siblings()
                    .not(e)
                    .removeClass('active')
                    .find('div')
                    .slideUp()
                    
            });
        });