[jquery] Having div 'open' upwards instead of down

Posted on 2012-08-21
Last Modified: 2012-08-22
I have the following scripts that show and hide a div:



Open in new window

I was wondering if there was a way to have it appear to open upwards instead of spreading downwards? It is a script to show more links in my footer, but I want them hidden by default. Then, on click, I want the footer to slide up and reveal those links.

Thanks for any help that you can provide.
Question by:prileyosborne
    LVL 11

    Accepted Solution

    Try this:

    <!DOCTYPE html>
      <link href="" rel="stylesheet" type="text/css"/>
      <script src=""></script>
      <script src=""></script>
      <style type="text/css">
      div { display: none; margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
      $(document).ready(function() {
    $("#slideit").click(function () {
          $("div").show("slide", { direction: "down" }, 1000);
    <body style="font-size:62.5%;">
      <button id="slideit">slidit</button>

    Open in new window

    This was taken from here and modified to suite the needings of the author:
    stackoverflow, jquery slide up

    Author Closing Comment

    That worked perfectly! Thanks so much!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
    PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now