アコーディオンメニューで、最初に一つを明けて状態で、他をクリックすると閉じる

Question

アコーディオンメニューを作成したのですが、うまくいきません。
ご教示いただけないでしょうか。
よろしくお願いいたします。

１．最初の一つが開いた状態
２．他のメニューを開くと、開いていたメニューが閉じる
３．クリックした時に画像が変わる（よくある＋－ボタンのことです）

「３」はopenというクラスを付けて何とかしようと思ったのですが、付け方がおかしいため、
うまく動かない状態です。
「２」はこのコードでうまく動いているようです。

<div class="box">
  <dl>
    <dt class="open">テスト</dt>
    <dd>テスト</dd>
  </dl>
  <dl>
    <dt>テスト</dt>
    <dd>テスト</dd>
  </dl>
  <dl>
    <dt>テスト</dt>
    <dd>テスト</dd>
  </dl>
</div>

$(function(){
	$(".box dl dd").hide();
  $(".box dl dt").click(function(){
    $(this).addClass("open");
    $(".box dl dd").slideUp();
    if($("+dd",this).css("display")=="none"){
      $("+dd",this).slideDown();
      $(this).removeClass("open");
    }
  });
});

.box dl {
  position: relative;
  width: 300px;
  margin: auto;
}

.box dl dt {
  height: 30px;
  margin: auto;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


.box dl:nth-of-type(1) dt {
  background: url(https://placehold.jp/300x30.png) 0 0 no-repeat;
}
.box dl:nth-of-type(1) dt.open {
  background: url(https://placehold.jp/3d4070/ffffff/300x30.png) 0 0 no-repeat;
}
.box dl:nth-of-type(2) dt {
  background: url(https://placehold.jp/300x30.png) 0 0 no-repeat;
}
.box dl:nth-of-type(2) dt.open {
  background: url(https://placehold.jp/3d4070/ffffff/300x30.png) 0 0 no-repeat;
}
.box dl:nth-of-type(3) dt {
  background: url(https://placehold.jp/300x30.png) 0 0 no-repeat;
}
.box dl:nth-of-type(3) dt.open {
  background: url(https://placehold.jp/3d4070/ffffff/300x30.png) 0 0 no-repeat;
}

Answer 1

CSSにはいろいろ問題がありそうですが
openクラスがついてないdtの隣のddを消すならこんな感じ
(それと)

$(function(){
  $(".box dl dt:not(.open)~dd").hide();
  $(".box dl dt").on("click",function(){
    $(".box dl dt").not($(this)).removeClass("open").siblings("dd").slideUp();
    $(this).toggleClass("open").siblings("dd").slideToggle();
  });
});

Comments

[jyoze]

yambejpさん
ありがとうございます。
このような短いコードで解決できるとは思いませんでした。
完全に思った動きになりました。
本当にありがとうございました！