Question

After some great help from Josh Mein with a Javascript Hide/Show menu, the menu is working 100%, though I would like it when the page loads, that the menu is in it’s “Hide state”. Here is the jsFiddle link: http://jsfiddle.net/8y7Sr/3/ …when you load the page, the menu is showing and when you clicking on “Toggle Menu”, it will HIDE the nav. That’s perfect BUT How can I make it so that when you load the page, the menu is in it’s hide state already and when you click on “Toggle Menu”, the nav slides up? Josh mentioned that, to get this right, I must comment $("#stickyfooter").show(); out and add class="show_hide" to the div ID stickyfooter . I’ve been fiddling around but I can’t seem to get it working. I’ve most likely done something wrong but can anyone clarify what Josh mean’t? Thanks in advance 🙂

Answer 1

For a minimal change to your existing code just programmatically trigger your existing click event immediately:

$('.show_hide').click(function(){
   // your existing function code here

}).click();    // <---- add this bit

Demo: http://jsfiddle.net/8y7Sr/8/

Alternatively, remove the first line of code:

$("#stickyfooter").show();        // <--- delete this line

Change the #sticky_footer_title class to have:

bottom: 0px; 

And change the #stickyfooter class to have:

display: none;

Demo: http://jsfiddle.net/8y7Sr/11/

(As an aside, having both an id and a class called “stickyfooter” is kind of confusing. To me it would make more sense if the containing div had id="stickyfootercontainer" instead of class="stickyfooter".)