• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 869
  • Last Modified:

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

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.
1 Solution
Try this:

<!DOCTYPE html>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></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
prileyosborneAuthor Commented:
That worked perfectly! Thanks so much!

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now