CODEWITHSUNDEEP
javascriptjqueryhtmlsidebar
Shivam Pandya
Shivam Pandya

Reputation: 1061

Jquery Sidebar/Panel Close Issue

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);
        }

    });
});

Upvotes: 0

Views: 715

Answers (2)

Jan
Jan

Reputation: 1414

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.

Upvotes: 1

Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9422

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();
                                                       });
                });

Upvotes: 0

Related Questions