css/jquery

I have the following code, I want the "play" button to be an image and it to switch between that and another button that would say "close":

<script> 
$(document).ready(function(){
    $('#click').click(function(){
		if ($('#panel2').css('height') === '330px') {			
			$('#panel2').animate({
				top: '-35px',
				height: '40px'
			}, 1000);
		} else {		
			$('#panel2').animate({
				top: '-295px',
				height: '330px'
			}, 1000);
		}
    });
});
</script>

<style>
div.gray {
	position:relative; 
	background-color:#666;
	width:100%
}
#flip2 {
	position:relative; 
	top:0px;
    padding: 5px 0;
	width:100%;
	height:50px;
	background-color: rgb(34,178,181);
	z-index:3
}
#flip2 #click {
	margin-left:85%;
	width:35px;
	height:40px;
	background-color:gold;
	border-radius:25px;
	border:2px solid #000;
	text-align:center;
	font-size:1.3em;
	line-height:45px;
	padding-left:5px;
	z-index:2
}
#panel2 {
	position:absolute; 
	top:-35px;
	background-color:rgb(39,111,107);
    text-align: center;
    width: 20%;
	margin-left:75%;
	height: 40px;
	border: 15px solid rgb(34,178,181);
	z-index:1;
	border-radius:30px
}
</style>
<div class="gray">
<div id="flip2">
   <div id="click">&#9654;</div>
</div>
   <div id="panel2">Hello world!</div> 
</div>    </div>

                                          

Select allOpen in new window