Jquery Sidebar/Panel Close Issue

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