アコーディオンメニューで一個開けると他は閉じるようにしたい

Question

前提・実現したいこと

WordPressで検索サイトを構築しています。
検索部分のアコーディオンメニューで一個開けると他は閉じるようにしたいのですが、
他を開けても閉じずに開いたままになってしまいます。
ご指導のほどよろしくお願いします。

該当のソースコード

<div class="accordionbox" id="accordion">
	<ul class="accordion">
		<li class="accordionlist">
			<div class="clearfix">
				<div class="accordionlist-title">
					<p>カテゴリで探す</p>
				</div>
				<p class="accordion_icon"><span></span><span></span><span></span></p>
			</div>
			<ul class="accordionlist-item">
				<li><a href="">未分類</a></li>
				<li><a href="">掘削・運搬・解体・林業</a></li>
				<li><a href="">バックホー</a></li>
				<li><a href="">バックホー用アタッチメント</a></li>
				<li><a href="">林業機械</a></li>
				<li><a href="">発電機・溶接機</a></li>
				<li><a href="">コンプレッサー・エア工具</a></li>
				<li><a href="">転圧・道路用機械</a></li>
				<li><a href="">荷役機械・吊具</a></li>
				<li><a href="">ベルトコンベアー</a></li>
				<li><a href="">レンタカー・高所作業車</a></li>
				<li><a href="">トラクター・ビーチクリーナー</a></li>
				<li><a href="">各種ポンプ・高圧洗浄機</a></li>
				<li><a href="">コンクリート打設機械</a></li>
				<li><a href="">電動工具・小型エンジン機械</a></li>
				<li><a href="">草刈・山林用・チェーンソー</a></li>
				<li><a href="">掃除機・集塵機</a></li>
				<li><a href="">冷熱機・断熱機・送風機</a></li>
				<li><a href="">照明機器</a></li>
				<li><a href="">安全保安機器</a></li>
				<li><a href="">軽仮設材</a></li>
				<li><a href="">敷鉄板・ゴムマット</a></li>
				<li><a href="">ユニットハウス・仮設トイレ</a></li>
				<li><a href="">備品</a></li>
				<li><a href="">測量機、測定器</a></li>
				<li><a href="">水タンク・ノッチタンク</a></li>
				<li><a href="">基礎工事用機械</a></li>
				<li><a href="">除雪機・タイヤショベル</a></li>
			</ul>
		</li>
		<li class="accordionlist">
			<div class="clearfix">
				<div class="accordionlist-title">
					<p>名前で探す（あいうえお）</p>
				</div>
				<p class="accordion_icon"><span></span><span></span><span></span></p>
			</div>
			<ul class="accordionlist-item" style="height: auto;">
				<li><a href="">ア行</a></li>
				<li><a href="">カ行</a></li>
				<li><a href="">サ行</a></li>
				<li><a href="">タ行</a></li>
				<li><a href="">ナ行</a></li>
				<li><a href="">ハ行</a></li>
				<li><a href="">マ行</a></li>
				<li><a href="">ヤ行</a></li>
				<li><a href="">ラ行</a></li>
			</ul>
		</li>
	</ul>
</div>

.accordionlist {
  padding: 15px 20px;
  border-bottom: 1px solid #FFF;
}

li.accordionlist {
  display: block;
  font-size: 13px;
  font-size: 0.8125rem;
}

.accordionlist-item li:first-child {
  display: none !important;
}

.accordionlist div .accordionlist-title {
  float: left;
  margin-bottom: 0;
}

.accordionlist div .accordionlist-title p {
  margin-bottom: 0;
}

.accordionlist ul {
  display: none;
}

.accordionlist-item li {
  display: inline-block;
  background-color: #FFF;
  padding: 6px;
  border-radius: 2px;
  margin: 10px 5px 5px 0;
}

.accordionlist-item a {
  color: #3840C3;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 700;
}

.accordionlist-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  overflow-y: scroll;
  margin-top: 10px;
  height: 155px;
}

.accordion_icon,
.accordion_icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.accordion_icon {
  position: relative;
  width: 30px;
  float: right;
}

.accordion_icon span {
  position: absolute;
  right: 0;
  width: 35%;
  height: 2px;
  background-color: #FFF;
  border-radius: 4px;
}

.accordion_icon span:nth-of-type(1) {
  top: 1.5px;
  right: -4.4px;
  border: 2px solid #FFF;
  background-color: unset;
  height: 19px;
  width: 19px;
  border-radius: 100px;
}

.accordion_icon span:nth-of-type(2) {
  top: 10px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.accordion_icon span:nth-of-type(3) {
  top: 10px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.accordion_icon.active span:nth-of-type(2) {
  display: none;
}

.accordion_icon.active span:nth-of-type(3) {
  top: 10px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

$(function () {
	$(".accordionbox div").on("click", function () {
		$(this).next().slideToggle();
		if ($(this).children(".accordion_icon").hasClass('active')) {
			$(this).children(".accordion_icon").removeClass('active');
		} else {
			$(this).children(".accordion_icon").addClass('active');
		}
	});
});

$(function () {
	$('.accordion p.accordion_icon').click(function () {
		$(this).next('.accordion .accordionlist-item').slideToggle();
		$('.accordion p.accordion_icon').not($(this)).next('.accordion .accordionlist-item').slideUp();
	});
});

試したこと

dt-ddからul-liul-liへ再構築しソースコードを見直しましたが、まだ何かが足らないようです。

Answer 1

以下ように書けば動作します。
質問に記載されているコードはほかにも十数箇所に問題がありますが
問題が多すぎるので回答は控えます。

• CSSで小数点pxが使用されている
• CSSに使用されていないセレクタの指定がある
• CSSの指定ミスで表示が崩れている
• $(function が無駄に2回記述されている
• clickイベントの発火位置が.accordionbox divになっている
• etc.

<style>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordionlist-item {
  display: none;
}
</style>
<div class="accordionbox" id="accordion">
<ul class="accordion">
  <li class="accordionlist">
    <div class="accordionlist-title">
      <p>カテゴリで探す</p>
    </div>
    <ul class="accordionlist-item">
      <li><a href="">未分類</a></li>
      <li><a href="">掘削・運搬・解体・林業</a></li>
    </ul>
  </li>
  <li class="accordionlist">
    <div class="accordionlist-title">
      <p>名前で探す（あいうえお）</p>
    </div>
    <ul class="accordionlist-item">
      <li><a href="">ア行</a></li>
      <li><a href="">カ行</a></li>
    </ul>
  </li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
  $(".accordionlist-title").on("click", function() {
    $(".accordionlist-title").next().hide();
    $(this).next().slideDown();
  });
});
</script>

Answer 2

表示されている自分をクリックしたときにtoggle処理をいれるかどうかによります

$(function(){
  $('.clearfix').next('.accordionlist-item').hide();
  $('.clearfix').on('click',function(){
    $('.clearfix').not($(this)).next('.accordionlist-item').slideUp();
    $(this).next('.accordionlist-item').slideToggle();
  });
});

Comments

[soraatori]

ありがとうございます。解決いたしました。
コードを紐解いて理解していきたいと思います。