Jquery - Dynamic sliding Div

Jquery - Dynamic sliding Div

I'm new to jQuery, so any help is appreciated.
I am "sort of" trying to reproduce this:
http://tympanus.net/Tutorials/HoverSlideEffect/
However, I want to use DIV tags with web content in them vs images.
I also don't want the box to slide when the mouse is over. I only want to
trigger the change when a button is clicked.
I sorta tried to mess with this code, but it's a little complex for me at
my current state. I wrote my own code that is sort of working, but here's
my problem:
If I open the page and choose the first button, everything is fine.
Because I basically have the div sliding out and another one sliding back
in its place; however, if I went form button 1 to button 2, it doesn't
work. I'm not sure how to make the div tags "generic" so no matter what
content is in the current box, the new content will replace it.
I understand "this" but not sure how to apply it. I did code school, but
that only gave me a basic understanding.
Thanks for any help in advance.