【jQuery】slideToggleで開閉時に矢印の向きを変える

Question

###前提・実現したいこと
http://liginc.co.jp/web/js/jquery/34048

質問１
こちらの記事を参考に「もっと見る」というボタンを作成しました。
開いている状態では「もっと見る↓」
閉じている状態では「閉じる↑」
というように表示を切り替えるにはどうしたらよいでしょうか。

質問２
また最初は閉じた状態で始まるようにしたいのですが、
以下の質問を参考にCSSを書き換えてもうまくいきませんでした。
https://teratail.com/questions/21542

試しにHTMLに直接記述してみたところ、一応動いたのですが
もう少しスマートな実装にしたいです。

<dl id="acMenu" style="displey:none;">
    <dt>アコーディオンメニュー1</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー2</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー3</dt>
    <dd>アコーディオンメニューが開く。</dd>
</dl>

Comments

[kei344]

ご自身で書かれたJavaScript/CSSを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

質問1
こちらでいかがでしょうか？

<dl id="acMenu">
	<dt>もっと見る↓</dt>
	<dd>アコーディオンメニューが開く。</dd>
	<dt>もっと見る↓</dt>
	<dd>アコーディオンメニューが開く。</dd>
	<dt>もっと見る↓</dt>
	<dd>アコーディオンメニューが開く。</dd>
</dl>

<script>
	$(function(){
		$("#acMenu dt").on("click", function() {
			var dt = $(this);
			dt.next().slideToggle(function(){
					if(dt.next().is(':visible')) {
						dt.text("閉じる↑");
					}
					else
					{
						dt.text("もっと見る↓");
					}
				}
			);
		});
	});
</script>

質問2
メニュー全体を最初は非表示にしたいということでしょうか？
それであれば以下でよいかと思います。

#acMenu {
	display:none;
}

Comments

[onrpp]

希望通りの実装が出来ました！ありがとうございます！