1

I have reviewed lots of other posts so please mods this is NOT a duplicate because the other posts do not answer my query. I have the following HTML:

<div id="page"></div>
<div id="page1">
  <h1>Page One</h1>
  <a href="#" id="topage2">Page 2</a>
</div>
<div id="page2">
  <h1>Page Two</h1>
  <a href="#" id="topage1">Page 1</a>
</div>

How would I use JQuery to animate and either slide up 'page2' DIV to replace 'page1' div and vice versa? I've tried:

var page1 = $('#page1').offset();
var page2 = $('#page2').offset();
page2.top = page1.top;
page2.left = page1.left;

Just to test it to see if I can replace 'page1' with 'page2' but it doesn't work. Obviously that code is wrapped up in a function which the hyperlink to go to each page uses, i.e $('#topage1').click, etc...

Has anyone any ideas, like I say have already looked at some other questions and answers but none of them seem to work or do what I want. Thanks in advance for any help.

Geordie Dave
  • 65
  • 3
  • 8

1 Answers1

0

Using JQuery you can simply:

$( "#page1" ).slideUp();
$( "#page2" ).slideDown();

http://api.jquery.com/slideup/

Peter Black
  • 1,142
  • 1
  • 11
  • 29
  • Hi, this doesn't work at all. I've tried putting that in but it just doesn't seem to do what I want. I would like for Page 1 DIV to disappear and Page 2 DIV to slide up in it's place. This is pretty much what I'm wanting to happen. – Geordie Dave Feb 21 '15 at 18:12
  • Do you have the JQuery library installed? http://www.w3schools.com/jquery/jquery_get_started.asp – Peter Black Feb 22 '15 at 01:46