• 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:

$('#expand_foot').click(function(){
	$('#foot').toggle('slow');
});

$('#close_foot').click(function(){
	$('#foot').hide('slow');
});

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.
0
prileyosborne
Asked:
prileyosborne
1 Solution
 
mcnuteCommented:
Try this:

<!DOCTYPE html>
<html>
<head>
  <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; }
</style>

  <script>
  $(document).ready(function() {
    
$("#slideit").click(function () {
      $("div").show("slide", { direction: "down" }, 1000);
});

  });
  </script>
</head>
<body style="font-size:62.5%;">
  <div></div>
  
  <button id="slideit">slidit</button>
</body>
</html>

Open in new window


This was taken from here and modified to suite the needings of the author:
stackoverflow, jquery slide up
0
 
prileyosborneAuthor Commented:
That worked perfectly! Thanks so much!
0

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