【アコーディオンメニュー】開くボタン・閉じるボタンが画像切り替えの場合

アコーディオンメニューの開くボタン・閉じるボタンをそれぞれ別の画像で作成し、切り替えて使用しています。
開くボタン・閉じるボタンはCSSのみで作成、もしくは1つの画像を回転させて使用することが増えましたが、別々に作成し切り替えて使用することもありますので、そのサンプルです。

htmlのコードは下記になります。
展開するテキストのpタグにidを付与し、タイトルのpタグのdata-content属性で対象のidを指定しています。

<div class="toggle_contents">
	<p class="toggle_title" data-content="#box01">タイトル1<span class="toggle_btn">開く</span></p>
	<p class="toggle_txt" id="box01">ダミーテキストダミーテキストダミーテキスト</p>
</div>

<div class="toggle_contents">
	<p class="toggle_title" data-content="#box02">タイトル2<span class="toggle_btn">開く</span></p>
	<p class="toggle_txt" id="box02">ダミーテキストダミーテキストダミーテキスト</p>
</div>

<div class="toggle_contents">
	<p class="toggle_title" data-content="#box03">タイトル3<span class="toggle_btn">開く</span></p>
	<p class="toggle_txt" id="box03">ダミーテキストダミーテキストダミーテキスト</p>
</div>

続いてCSSのコードです。
開くボタン・閉じるボタンはspanタグ内に背景画像で表示させています。spanタグのクラス名selectedの有無で画像を切り替えます。
また、テキストのpタグは非表示にしています。

.toggle_title {
	font-weight: bold;
	line-height: 42px;
	margin: 0;
	padding: 0 0 0 10px;
	position: relative;
}
.toggle_btn {
	display: inline-block;
	width: 88px;
	height: 32px;
	background: url(open.png) no-repeat right top;
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.toggle_btn.selected {
	background: url(close.png) no-repeat right top;
}
.toggle_txt {
	display: none;
}

最後にjQueryのコードです。
開くボタンをクリックでボタンを表示させているspanタグにクラス名selectedを付与、閉じるボタンをクリックでクラス名selectedを削除しています。

$(function(){
	$('.toggle_btn').click(function(){
		$(this).toggleClass('selected');
		$($(this).parent().attr('data-content')).slideToggle();
	});
});