Accordion menu open and close?

Hi all

I have a simple accordion menu here

http://www.ttmt.org.uk/forum/accordion.html

What I would like here is to have a rollover on each button so
they change color when hovering over them.

When the button is clicked the arrow should point down and the menu opens with
the color of the button the same as the rollover.

Clicking an open button/menu I want it to change the arrow and colour again back to it's closed state.

At the moment the rollover works until a button is clicked.
When a button is clicked the button changes color and the arrow changes.
If I click an open button it closes but the buttons arrow and color don't change.

If I click another button the other button does change back.

Any help would be greatly appreciated.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 #wrap{
	   margin:50px;
	 }
	 .btn{
	   border-bottom:1px solid #ccc;
	   cursor:pointer;
	   padding:5px;
	   width:400px;
	 }
	 .first{
	   border-top:1px solid #ccc;
	 }
	 .content p{
	   padding:10px 10px 20px 10px;
	   width:400px;
	 }
	</style>
</head>

<body>
  <div id="wrap">
    <div class="btn first"><span></span><h4>One</h4></div>
    <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div><!-- #content -->
    
    <div class="btn"><span></span><h4>Two</h4></div>
    <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div><!-- #content -->
    
    <div class="btn"><span></span><h4>Three</h4></div>
    <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div><!-- #content -->
  </div><!-- #wrap -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
  
    $('div.btn span').html('&rarr;');
    
    $('div.btn').hover(function(){
      this.css('background','#f3f3f3')
    })
    
    $('div.btn').click(function() {
    		$('div.btn span').html('&rarr;');
    		$('div.btn').css('background','white');
    		$(this).css('background','#f3f3f3');
    		$('span', this).html('&darr;');
        if (!$(this).next().hasClass("open")) {
            $('div.content.open').slideUp('normal', function() {
                $(this).toggleClass("open");
            });
        }
        $(this).next().slideToggle('normal', function() {
            $(this).toggleClass("open");
        });  
    });
    $("div.content").hide();
    
  </script>

</body>
</html>