Switching styles (Class) on a function that show and hide a div tag content
===

I see a lot of resource on show/hide content using JQuery but what I don't know is how I can switch the style on this function as well. I can switch the text that display but I am using a button as a background image in a anchor tag.

Here is what I need to do. The button is default to Show More but When the button is click the content is visible; I would like to switch the class/style so that the button indicate Show Less.

Here is the JQuery:

    <script type="text/javascript">
    $(document).ready(function() { 
      $('#additionalContentBox').hide(); 
      $('.readmore').toggle(function(){ 
        $('#additionalContentBox').show(); 
      }, 
      function(){ 
        $('#additionalContentBox').hide();
        $('.readless').toggle(function(){ 
      }); 
    });
    </script>

The HTML:

    <a href="#/" class="readmore readless">Read Full Article</a>
    
    <div id="additionalContentBox">
    <p>pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et. ante ipsum primis in faucibus</p>
    </div>

Finally, the CSS:


    .readmore{
    	display: block;
    	background-image: url(img/readmore15.png);
    	text-indent: -10000px;
    	background-repeat: no-repeat;
    	background-position: bottom left;
    	display: block;
    	height: 18px;
    	line-height: 18px;
    	width: 100px;
    	margin-left: 4px;
    	margin-top: 4px;
    	margin-bottom: -14px;
    }
    
    
    .readless{
    	background-image: url(img/readmore15.png);
    	background-position: top left;
    }

