【アコーディオンメニュー】開くボタン・閉じるボタンを1つの画像の回転で実装する場合

アコーディオンメニューの開くボタン・閉じるボタンを1つの画像で実装しています。
開くボタンは下向き矢印の画像、閉じるボタンは開くボタンをCSSで180度回転させた上向き矢印の画像です。以下そのサンプルです。

htmlのコードは下記になります。
タイトルとテキストをpタグでマークアップしたシンプルな構造です。

<div class="toggle_contents">
	<p class="toggle_title">タイトル1</p>
	<p class="toggle_txt">ダミーテキストダミーテキストダミーテキスト</p>
</div>

<div class="toggle_contents">
	<p class="toggle_title">タイトル2</p>
	<p class="toggle_txt">ダミーテキストダミーテキストダミーテキスト</p>
</div>

<div class="toggle_contents">
	<p class="toggle_title">タイトル3</p>
	<p class="toggle_txt">ダミーテキストダミーテキストダミーテキスト</p>
</div>

続いてCSSのコードです。
開くボタン・閉じるボタンの画像はタイトルのpタグの疑似要素で背景画像として指定しています。タイトルのpタグのクラス名selectedの有無で画像を切り替えます。transitionを設定していますので、開くボタンが180度回転して閉じるボタンになるよう動作します。
また、テキストのpタグは非表示にしています。

.toggle_title {
	font-weight: bold;
	line-height: 42px;
	margin: 0;
	padding: 0 0 0 10px;
	position: relative;
	cursor: pointer;
	transition: 0.3s;
}
.toggle_title:hover {
	color: #fd7e00;
}
.toggle_title:after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	background:url(btn_arrow.png) no-repeat right top;
	position:absolute;
	top: 50%;
	right: 7px;
	transform: translateY(-50%);
	transition: 0.2s;
}
.toggle_title.selected:after {
	transform: translateY(-50%) rotate(180deg);
	transition: 0.2s;
}
.toggle_txt {
	display: none;
}

最後にjQueryのコードです。
タイトルをクリックでタイトルのpタグにクラス名selectedを付与、再度タイトルをクリックでクラス名selectedを削除しています。

$(function(){
	$('.toggle_title').click(function(){
		$(this).toggleClass('selected');
		$(this).next().slideToggle();
	});
});