CSS positioning issue with jQuery

Question

Just wanted your help on a CSS Positioning issue. Here is the link to the code on code pen... http://codepen.io/anon/pen/FKdLq

When you click on 'Latest News' the text slides in and out, however the actual button itself stays static. What I would like is for the 'Latest News' button to slide with the text when clicked but cannot figure it out :|

The whole thing needs to be fixed to the browser window on the right.

Any help would be appreciated.

P.S. I am extremely new to jQuery, is my jQuery code 'clean'? ;)

Answer 1

Just make sure you're animating the "button" (defined by an h2, I believe) as well. It can be referenced by this in your function, since it's what's being clicked. Here's a fixed version of your JS:

$(function() {
    $("aside h2").toggle(function(){
            $('.box').animate({ right:"-350"});
            $(this).animate({right:"0"});
        },function(){
            $('.box').animate({ right:"-5"});
            $(this).animate({right:"271"});
    });
});

Hope that helped in any manner!