Jquery Sidebar/Panel Close Issue

Question

I Create one Sidebar/Panel, You can view demo Here (JsFiddle)

Issue is that on Side-panel whenever I click, It Close. My need is Side-panel close only when we click on box which we use to open side panel.

Here is my code.

HTML

<ul id="dock">
            <li id="files">
                <ul class="free">
                    <li class="header"><a href="javascript:void(0);" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"  style = "padding-top: 12px;"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT=""  style = "padding-top: 12px;"></a><H5 ID="colorgreen">DISCOVER </h4></li>
                    <div id="accordion">
                      <h3>Section 1</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 1 content
                        </p>
                      </div>
                      <h3>Section 2</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 2 content
                        </p>
                      </div>
                      <h3>Section 3</h3>
                      <div class = "accordionheight">
                        <p>
                        accordion 3 content
                        </p>
                      </div>
                    </div>
                </ul>
            </li>

            <li id="tools">
                <ul class="free">
                    <li class="header"><a href="#" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Undock"></a><H5 ID="colorgreen">FACT FILE</H5></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
                    <li><a href="#">This is one item</a></li>
               </ul>
            </li>
        </ul>

Jquery

$(document).ready(function () {
    var docked = 0;

    $("#dock li ul").height($(window).height());


    $("#dock li").click(function () {
        var test = $(this).find("ul").css('width');
        if (test == "0px") {
            $(".docked").addClass("free").removeClass("docked").animate({
                right: "-40px",
                width: '0px'
            }, 200);
            $(this).find("ul").addClass("docked").removeClass("free").animate({
                right: "40px",
                width: '180px'
            }, 200);

        } else {
            $(this).find("ul").addClass("free").removeClass("docked").animate({
                right: "-40px",
                width: '0px'
            }, 200);
        }

    });
});

Answer 1

The problem is, that, because your panels ( ul.free ) are inside the li#files / li#tools , these elements also receive a click event, when your panels are clicked (because the click event goes up to all parents until stopPropagation() is called).

You can work around this, by simply adding an additional element in the sidebar list items like this:

<ul id="dock">
    <li id="files">
        <div class="handler"></div>
        <ul class="free">...</ul>
    </li>
    <li id="tools">
        <div class="handler"></div>
        <ul class="free">...</ul>
    </li>
</ul>

Than bind the click event to this handler div:

$(document).ready(function(){
    $("#dock .handle").click(function(){
        var test = $(this).next("ul").css('width');
        if (test=="0px") {
            $(".docked").addClass("free")
                .removeClass("docked")
                .animate({right:"-40px",width:'0px'}, 200);
            $(this).next("ul").addClass("docked")
                .removeClass("free")
                .animate({right:"40px",width:'180px'}, 200);
        } else {
            $(this).next("ul").addClass("free")
                .removeClass("docked")
                .animate({right:"-40px",width:'0px'}, 200);
        }
    });
});

I also updated your jsFiddle .

Answer 2

Please try this.

The nested ul which is inside #files li will also respond to the click in your code. But we can prevent that by using stopPropagate() which will prevent the handler to be associated with the parent elements.

Jquery

            $(document).ready(function(){
                var docked = 0;

                $("#dock li ul").height($(window).height());


                $("#dock li").click(function(event){
                        var test = $(this).find("ul").css('width');

                    if (test=="0px"){
$(".docked").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200);                      $(this).find("ul").addClass("docked").removeClass("free").animate({right:"40px",width:'180px'}, 200);

                    }else{
                        $(this).find("ul").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200);
                    }

                    });
                                $("#dock li ul").click(function(event)
                                                       {
                                                           event.stopPropagation();
                                                       });
                });