I know, noobie here. I'm having trouble getting a slideUp effect to work correctly with a footer. I can easily get a slideDown from the top of the page to work, but when I try and reverse it the div that slides up covers the button. Basically I need to know how to bind/attach the activation button/tab to the div that's sliding up. I know I saw it working somewhere and wish I had saved the link because I could use it right about now. I know this is probably an easy one for anyone else, but I'm admittedly a noob in this area.
Additionally: After I get it working I want to apply it to a sticky footer. Is that going to be a problem? Anything special I need to know about a sticky footer that slides up? Thanks in advance for any assistance! Here's what I have sofar: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ jquery.min.js" type="text/javascript"></script> <script type="text/javascript">document.documentElement.className = 'js';</script> <script type="text/javascript"> $(document).ready(function() { $(".btn-slide").click(function(){ $(".inner").slideToggle("slow"); }); }); </script> <style type="text/css"> .inner { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 400px; margin-bottom:0px; background-color: #4c5; color: #333; } .slide { position:absolute; display:block; width:100%; bottom:4px; border-bottom: solid 4px #422410; } .btn-slide { text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #000; border:1px solid #000; text-decoration: none; } .js .inner { display:none; } </style> </head> <body> <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> <div class="inner"> <!-- you can put content here --> </div> </body>