How to open and close div element while cliking of anchor tag

Question

Below is my html format i want to open leftbar div tag while clicking of open-left tag and also close leftbar div tag while clicking of open-left tag.

    <div id="leftbar" class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <br />
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                        <img src="assets/img/nloop-min.png" alt="" class="drawer-logo" />
                    </div>
                    <br />
                    <ul>
                        <li><a href="#"><i class="fa fa-home fa-1x"></i>&emsp;Home</a></li>
                        <li><a href="#"><i class="fa fa-dot-circle-o fa-1x"></i>&emsp;Tour</a></li>
                        <li><a href="#"><i class="fa fa-bullseye fa-1x"></i>&emsp;FAQ</a></li>
                        <li><a href="#"><i class="fa fa-magic fa-1x"></i>&emsp;About</a></li>
                        <li><a href="#"><i class="fa fa-comment-o fa-1x"></i>&emsp;Contact</a></li>
                    </ul>
                    <br />
                    <p>
                        &copy; 2013 - nLoop</p>
                </div>
            </div>
        </div>
        <div id="content" class="snap-content">
                <div id="sidebarmenu" class="col-lg-1 col-sm-1 col-xs-1 col-md-1">
                    <a href="#" id="open-left"></a>
                </div>
                <div id="rightpart" class="margingap">
            Right part
                </div>
        </div>

    <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content'),
                disable: 'right'
            });
            $(document).ready(function () {
                var addEvent = function addEvent(element, eventName, func) {
    if (element.addEventListener) {
        return element.addEventListener(eventName, func, false);
    } else if (element.attachEvent) {
        return element.attachEvent("on" + eventName, func);
    }
};

addEvent(document.getElementById('open-left'), 'click', function () {

    snapper.open('left');

        var state = $(this).is('.open');
       if (state) {
            snapper.close('left');
        }
});

            });

        </script> 

Answer 1

Open and close div element while cliking an anchor tag:

$("#open-left").click(function(){
    $("#leftbar").toggle();
});

See more about this here: .toggle() Documentation

Code explanation:

I am just attaching a click event to the #open-left tag and then I called the .toggle() on the #leftbar . This just pretty much keeps record of what is the current state of the object, hiddden or shown, and then calls the particular function according to the state.

Also, see this working example: fiddle .

Answer 2

Are you maybe looking for something like jQuery's hide() and show() ? Or toggle() ?

Answer 3

Try this:

var isOpen = false;
$("#open-left").click(function(){
    if(isOpen){
       $("#leftbar").slideUp(); isOpen = false;}
    else{ $("#leftbar").slideDown(); isOpen = true; }
});