title: Jquery hide / show div but to keep toggle link from "hiding" too
body: <p>I've just posted a <a href="https://stackoverflow.com/questions/11162387/issue-with-hide-show-jquery-on-fixed-positioned-div">question</a> on stackoverflow about a hide/show issue I was having but that's been resolved, though this is a follow up on that as I have come across another issue. </p>
  
  <p>Ok, so I've got a sticky footer nav and there is a link just above the nav (also "sticky") that says "Toggle menu" ... when I click to hide the menu, the link that I've just clicked also hides. So basically there is no way to make the menu visible again cos the toggle button has also disappeared!</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" 
  type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
      $("#stickyfooter").show();
      $(".show_hide").show();
  
  $('.show_hide').click(function(){
  $("#stickyfooter").slideToggle("slow");
  });
  
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="stickyfooter"&gt;
  &lt;div id="stick_footer_title"&gt;&lt;a class="show_hide" href="#"&gt;Toggle Menu &amp;#x25BC;
  &lt;/a&gt;&lt;/div&gt;
  
  &lt;ul id="footer_menu"&gt; 
  &lt;li class="imgmenu"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#intro"&gt;Intro&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#photos"&gt;Photos&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I know the <code>stick_footer_title</code> is within the div that gets hidden (hence why it disappears) but I'm not sure how to make it so that when I click "Toggle Menu" the link lowers with the menu that's about to disappear but STILL shows and can be clicked again to show raise / show the nav.</p>
  
  <p>I've tried fiddeling with the Jquery but I'm not good with jquery. I'm pretty sure that I need to do something in the Jquery, like a .show(); parameter but I've just been guessing to try get this right.</p>
  
  <p>Any solutions?</p>
  
  <p>GENERAL CSS:</p>
  
  <pre><code>#sticky_footer_title { position:absolute; top: -35px; left: 20px; background-
  color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-size: 18px; color:#FFF; 
  text-shadow:none;line-height: 34px; padding: 0px 20px 0px 20px }
  
  
  #stickyfooter {
  position: fixed;
  bottom: 0px;
  margin:0 auto;
  width: 960px;
  left:52%;
  margin-left:-530px;
  height: 40px;
  background:#e9e9e9;
  border-top: 1px solid #e9e9e9;
  padding:0px 10px 0px 10px;
  font-family:Arial, Helvetica, sans-serif;
  z-index:1200;
  
  
  /* CSS3 Stylings - Creates the double top border */
  -moz-box-shadow: 0px -1px 0px #e9e9e9;
  -webkit-box-shadow:  0px -1px 0px #e9e9e9;
  box-shadow:  0px -1px 0px #e9e9e9;
  
  /* CSS3 Rounded Corners */
  -moz-border-radius: 10px 10px 0px 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  
  /* CSS3 Stylings - Creates the gradient background */
  background: -moz-linear-gradient(top, #FFF, #e9e9e9);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9e9e9), to(#FFF));
  }
  </code></pre>