I know jQuery has animations that can slide DIVs, but i'm having a hard time creating the right function to do what I need to do. Many examples online show a
previous and
next button that alternate from DIV to DIV, but this isn't what i'm wanting to do. Here's my layout:
1) Anchored images pointing to a class corresponding to the appropriate DIV:
- <a href="#div1"><img src="image1.png"></a>
- <a href="#div2"><img src="image2.png"></a>
2) Initial DIV showing content when the page is loaded:
- <div class="initialDIV">content</div>
3) Subsequent DIVs of the same look and feel, different content. These corresponding to the anchored image references:
- <div class="div1" style="display:none;">content</div>
- <div class="div2" style="display:none;">content</div>
My goals are the following:
1) initialDiv displayed when the document loads
2) Clicking on anchored image references the corresponding DIV anchor and the jQuery sliding process begins:
a) The current DIV displayed either slides away or slides up
b) The selected DIV from the anchored image performs the opposite function (slides in/slides down) to be displayed in the same position as the previous DIV.
c) The browser back button takes the user back to the previous DIV.
I've looked over the jQuery tools and have played with tabs, but i'm still unsure on how to do it. Based on my structure, it should just be all on the JS code. Can anyone help me with this code snippet?
Thanks,
James