title: Toggle a footer by clicking a button situation
body: <p>I have been working on this for a week or so and I have a solution that works but not very well.</p>
  
  <p>I have a hidden footer with a tab like button above it. When this button is clicked my footer will then slide up and push that button up as well.</p>
  
  <p><strong>My problem</strong> comes from me being unable to place my button inside of the footer. Since the footer is hidden until clicked the button would also be hidden.</p>
  
  <p>One method I tried was instead of hiding the footer I placed a negative <code>bottom</code> on it to hide it until clicked. This was working well but once it was clicked you could just scroll back down and it was never hidden after that. </p>
  
  <p>I then decided I would have to hide/show it but this is where the problem came about with the button. Since the footer is hidden I can not place the button inside of the footer. Since the button is outside of he footer I have tried to animate it but it would not animate at the same time which was very odd. </p>
  
  <p>The final solution I did was using css3 easing but it still is not perfect or even usable due to how un-flushed it is.</p>
  
  <p><strong><em>I am trying to make both animate at the exact time while looking as if they are one object.</em></strong></p>
  
  <p><strong> Here is my <code>HTML</code></strong></p>
  
  <pre><code>&lt;span class="fTab"&gt;Open Footer&lt;/span&gt;
  &lt;footer&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p><strong> Here is my <code>CSS</code></strong></p>
  
  <pre><code>footer {
    position: absolute;
    display: none;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: rgba(0, 0, 0, 0.69);
  }
  
  .fTab {
    width: 15%;
    height: 4em;
    position: absolute;
    bottom: 0;
    left: 2em;
    display: block;
    background: rgba(0, 0, 0, 0.69);
    color: #c1c1c1;
    line-height: 4em;
    text-align: center;
    font-size: 1.2em;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
  }
  
  .fTab.current {
    bottom: 20%;
  }
  </code></pre>
  
  <p><strong> Here is my <code>jQuery</code></strong></p>
  
  <pre><code>function footer() {
    var footerH = $('footer');
    var fH = footerH.height();
  
    $('.fTab').on('click', function() {
        $(this).toggleClass('current');
        $('footer').slideToggle(500);
    });
  }
  
  footer();
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/LC2Tr/1/" rel="nofollow">JSFIDDLE</a> and here is another option I was trying, <a href="http://jsfiddle.net/LC2Tr/3/" rel="nofollow">JSFIDDLE 2</a></p>
  
  <p>Here is the <a href="http://jpowell43.mydevryportfolio.com/temp/" rel="nofollow">LIVE SITE</a> if that is needed.</p>
  
  <p>If you need anything else then let me know and I appreciate any and all help!</p>