Here's what I've got so far:

http://jsfiddle.net/phantasmix/nAaMV/

1) The top button works on click just fine. How can I make the bottom button work the same way? Both will be shown on the same page.

2) Another issue is that the blue background is visible on the right. Is there any way to hide the blue background until it shows up to the left of the button?

CSS:

1. #button-top { width: 100px; position: absolute; left: 75%; top: 40px; padding-left: 100px; overflow: hidden;} 
2. #button-top:hover,

3. #button-bottom:hover { cursor: pointer;} 
4. .slide { position: relative; height: 100px; overflow: hidden; width: 350px; } 
5. .slide img {position: relative; z-index: 100;} 
6. .slide .innerTop, .slide .innerBottom { position: absolute; left: 0; top: 10px; width: 200px; height: 90px; padding: 6px; background: url(http://i39.tinypic.com/nz4ldw.png) 0 0 no-repeat; z-index: 50; } 
7. .slide .innerTop p, .slide .innerBottom p { width: 80px; padding:8px 16px; color: #fff; margin: 0; }

8.  .js .slide .innerTop, .js .slide .innerBottom { display: none; } 
9. #button-bottom { width: 100px; position: absolute; left: 75%; top: 240px; padding-left: 100px; overflow: hidden;}

SCRIPT:

1. $(document).ready(function () {
2. var $marginLefty = $('#button-top div.innerTop');
3. $marginLefty.css({
4. marginLeft: $marginLefty.outerWidth() + 'px',
5. display: 'block'
6. });
7. $('#button-top img').click(function () {
8. $marginLefty.animate({
9. marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $marginLefty.outerWidth() : 0
10. });
11. });
12. });

HTML:

1. <div class="slide" id="button-top"> [IMG LINK] 
2.      <div class="innerTop"> 
3.             <p>HIDDEN SLIDING CONTENT</p> 
4.      </div> 
5. </div> 
6. <div class="slide" id="button-bottom"> [IMG LINK]
7. <div class="innerBottom"> 
8.             <p>HIDDEN SLIDING CONTENT</p> 
9.    </div>
10. </div>