Using jquery toggle with 2 separate buttons and 2 seperate divs

I know what' im trying to do is simple. I had this working before with a change function but now I am switching out the dropdown for 2 images and a mouseover event. If a user clicks on image 1 then div 1 would show with a nice slide effect if 2 by chance was active they would swap. If they click on 2 then div 2 would show with a slide effect transitioning from 1 to 2.

    <script type="text/javascript">

$(function(){

         $('#divarea1').hide();
         $('#divarea2').hide();


         $('#freesample').mouseover(function() {
             $('#divarea1').toggle("slide", { direction: "up" }, 600);
   开发者_开发问答      });
});

</script>


<div id="divarea1"> show me this form</div>

<div id="divarea2"> show me this form</div>

I think what i'm missing is a way to capture the state of the toggle, or which button is active. Thanks for your help. This is one of the best communities around.

turn the toggle into a function and then add/remove a class in your toggle based on if that class is found on the div