How to make slide effect for Sidebar

Question

guys I need your assistance in my current project.

I want to give for my img button a "side effect" , which should be interactive. For instance, it must listen an event on click and should be opened and closed by clicking on img. I was to hardly trying to make this thing happened. Unfortunately, something wrong in my coding. And it should hide all div id="left"elements, since I'm doing responsive design for this project.

Please guys I need your help. I might assume my approach is totally wrong maybe you have some another recommendations.

Here is my HTML code:

<div id="main">
    <!-- This img "button" should do slide effect to the right side -->
    <img class="door_open" src="/templates/shablon/images/door_open.png">

    <div id="left">
        <div class="moduletable">
            <div class=" modtit">По материалу</div>
            <ul class="nav menu">
                <li class="item-118"><a href="/metallicheskie-dveri.html">Металлические двери</a></li>
                <li class="item-119"><a href="/derevyannye-dveri.html">Клееный брус</a></li>
                <li class="item-121"><a href="/plastikovye-dveri.html">Пластиковые двери</a></li>
                <li class="item-122"><a href="/shponirovannye-dveri.html">Шпонированные двери</a></li>
                <li class="item-157"><a href="/massiv-drevesiny.html">Массив древесины</a></li>
            </ul>
        </div>
        <div class="moduletable">
            <div class=" modtit">Фурнитура</div>
            <ul class="nav menu">
                <li class="item-163"><a href="/catalog-ruchek.html">Каталог дверных ручек</a></li>
                <li class="item-164"><a href="/zamki.html">Замки и защелки</a></li>
                <li class="item-165"><a href="/koroba.html">Наличники и короба</a></li>
                <li class="item-166"><a href="/arki.html">Арки</a></li>
                <li class="item-167"><a href="/lestnitsy.html">Лестницы</a></li>
            </ul>
        </div>
        <div class="moduletable diz">
            <div class=" modtit">По дизайну</div>
            <ul class="nav menu">
                <li class="item-136"><a href="/barokko.html">Барокко</a></li>
                <li class="item-137"><a href="/klassika.html">Классика</a></li>
                <li class="item-158"><a href="/ampir.html">Ампир</a></li>
                <li class="item-159"><a href="/minimalizm.html">Минимализм</a></li>
                <li class="item-160"><a href="/pop-art.html">Поп-арт</a></li>
                <li class="item-161"><a href="/eklektika.html">Эклектика</a></li>
                <li class="item-162"><a href="/modernn.html">Модерн</a></li>
            </ul>
        </div>
        <div class="moduletable">
            <div class=" modtit">По производителю</div>
            <ul class="nav menu">
                <li class="item-156"><a href="/buldoors.html">Бульдорс</a></li>
            </ul>
        </div>
    </div>

and here is my jQuery:

$('#left').on('click', function(){
    $('.moduletable').toggle('slide', { direction: 'left' }, 1000);
    $('#main-content').animate({
        'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
    }, 1000);
});

Here is how it's supposed to look like

enter image description here