【アコーディオンメニュー】開くボタン・閉じるボタンをフォントの反転で実装する場合

アコーディオンメニューの開くボタン・閉じるボタンをフォントで実装します。フォントにはFont Awesomeを使用します。開くボタンは下向き矢印のフォント、閉じるボタンは開くボタンを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度反転して閉じるボタンになるよう動作します。CSSはtransform: rotate(180deg);では回転になってしまいます。transform: rotateX(180deg);を指定してX軸で反転させます。

.toggle_title {
	font-weight: bold;
	line-height: 42px;
	margin: 0;
	padding: 0 0 0 10px;
	position: relative;
	cursor: pointer;
	transition: 0.3s;
}
.toggle_title:after {
	font-family: "Font Awesome 5 Free";
	content: "\f063";
	font-weight: 900;
	position:absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	transition: 0.2s;
}
.toggle_title.selected:after {
	transform: translateY(-50%) rotateX(180deg);
}
.toggle_txt {
	display: none;
}

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

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