Question

I am having trouble with a navigation menu I have created. Basically, the navigation consists of several tabs that is collapsible upon click a button and then expandable when you click that button again. When collapsed, the ends of the tabs are still visible, and when you hover over the tabs will go back out, and go back in when hovering out.

So I have the following navigation laid out:

<ul id="navigation">
<li><a href="../name1/">Name1</a></li>
<li><a href="../name2/">Name2</a></li>
<li><a href="../name3/">Name3</a></li>
<li id = "collapser"><a href = "javascript:void(0)">Collapse All</a></li>
</ul>

And I have the following jQuery/javascript laid out to do this:

           $("#collapser").click(function(){
            if($("#collapser").hasClass("clicked")){
                $(function() {
                  $('#navigation a').stop().animate({'marginLeft':'-118px'},1000);

                  $('#navigation > li').hover(
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'0px'},400);
                        },
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'-118px'},400);
                        }
                    );
                 });
                 $("#collapser").removeClass("clicked");
                 $("#collapser").addClass("unclicked");
                 $("#collapser").html('<a href = "javascript:void(0)">Expand All</a>')
             }
             else{
                $(function() {
                  $('#navigation a').stop().animate({'marginLeft':'0px'},1000);

                  $('#navigation > li').hover(
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'0px'},400);
                        },
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'0px'},400);
                        }
                    );
                 });
                 $("#collapser").removeClass("unclicked");
                 $("#collapser").addClass("clicked");
                 $("#collapser").html('<a href = "javascript:void(0)">Collapse All</a>')
             }
         })

The code works, but only when you click the link a second time. I can’t seem to figure out what I did to make it work only after clicking it once already.

Any help would be appreciated, thank you very much!!
-Quintin

EDIT:
Here is the CSS for the navigation:

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
font-size:14px;
top: 14px;
left: 0px;
list-style: none;
z-index:9999;}

ul#navigation li {
width: 100px;
}

ul#navigation li a {
display:block;
margin-bottom:3px;
width:126px;
padding:3px;
padding-left:15px;
background-color:#ffffff;
background-repeat:no-repeat;
background-position:center center;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 1px 3px #000;
}

ul#navigation .checked a{
color:#ffffff;
background-color:#000000;
}

Answer 1

You are verifying if your collapser div has or not the class clicked or unclicked, but you not initialize the div with some class. Adding the class clicked should adjust your effect:

<li id = "collapser" class='clicked'><a href = "javascript:void(0)">Collapse All</a></li>

You can see it with this jsfiddle