アコーディオンメニューが動きません

Question

前提・実現したいこと

サイト内の絞り込み検索のメニューをアコーディオンメニューにしたいのですが、
メニュー部分が閉じたままになってしまい開きません。
ファイルを分けず、一つのHTMLファイルで書いていた時は正常に開閉したのですが
ファイルを分け、外部ファイルとして読み込もうとしたら動かなくなりました。

発生している問題・エラーメッセージ

・アコーディオンを設定しているコードが反映されない

・ERROR:Parsing error:Unezpected token )
というエラーメッセージも出ています

該当のソースコード

<section class="accordion">
    		<div class="accordion__container">
	 		<h4 class="accordion__title js-accordion-title">検索条件で絞る</h4>
      		<div class="accordion__content">
				<form action="./" method="get" enctype="multipart/form-data">
					<div class="filter" id="js_filter">
					  <dl>
						<dt>家族構成</dt>
						<dd class="family">
						  <ul class="list-check clearfix filter-cond">
							<li>
							  <input type="checkbox" name="cat" value="fa1" id="family01" >
							  <label for="family01" class="checkbox">独身</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat" value="fa2" id="family02" >
							  <label for="family02" class="checkbox">2世帯</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat" value="fa3" id="family03" >
							  <label for="family03" class="checkbox">夫婦のみ</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat" value="fa4" id="family04" >
							  <label for="family04" class="checkbox">ペット</label>
							  </li>
							<li>
							  <input type="checkbox" name="cat" value="fa5" id="family05" >
							  <label for="family05" class="checkbox">その他</label>
							  </li>
							</ul>
						  </dd>
						</dl>

					  <dl>
						
			 
					<button id="filterBtn">上記の条件で施工実例を検索する</button>
				</form>
			</div>
			</div>
		</section>

.accordion{
  margin-top: 10px;
}
.accordion__container {
  width: 900px;
  margin: 0 auto;
  
}

.accordion__title {
  width: 200px;
  background-color: #b25332;
  border: 1px solid transparent;
  color: #fff;
  font-size: 1.25em;
  padding: .625em .625em .625em .1em;
  position: relative;
  cursor: pointer;
  user-select: none;
  text-align: center;
  font-weight: normal;
  font-size: 15px;
}

.accordion__title::before, .accordion__title::after {
  content: '';
  display: block;
  background-color: #fff;
  position: absolute;
  top: 50%;
  width: 15px;
  height: 2px;
  right: 25px;
}

.accordion__title::after {
  transform: rotate(90deg);
  transition-duration: .3s;
}

.accordion__title:hover,
.accordion__title:active,
.accordion__title.is-active { 
  background-color: #b25332;
}

.accordion__title.is-active::before {
  opacity: 0;
}

.accordion__title.is-active::after {
  transform: rotate(0);
}

.accordion__content {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  padding: 0 1.5em;
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: .3s;
  background-color:  rgba(255,255,255,0.6);
}

.accordion__content.is-open {
  border: 1px solid #b25332;
  padding: .625em 1.5em;
  line-height: normal;
  height: auto;
  opacity: 1;
}

document.addEventListener("DOMContentLoaded",() => {
  const title = document.querySelectorAll('.js-accordion-title');
  
  for (let i = 0; i < title.length; i++){
    let titleEach = title[i];
    let content = titleEach.nextElementSibling;
    titleEach.addEventListener('click', () => {
      titleEach.classList.toggle('is-active');
      content.classList.toggle('is-open');
    });
  }

});

補足情報（FW/ツールのバージョンなど）

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
を読み込んでいます。

Comments

[yambejp]

「検索条件で絞る」をクリックして、次の要素（div.accordion__content？）の
クラスをつけ外しするという認識でよいですか？

Answer 1

下記の可能性はありませんか？

①HTMLで読み込みのパスが間違っている（適当な例：<script src="js/ファイル名.js"></script>）

②分けた先のJavaScriptファイル側で<script>で囲ってしまっている。

Comments

[spraut]

ありがとうございます！
勘違いをしていてCSSと同じように<link>で設定してしまっていました。
こんなお恥ずかしい質問に答えてくださりありがとうございました。

Answer 2

.is-active{color:red}
.accordion__content{display:none}
.accordion__content.is-open{display:initial}

Comments

[yambejp]

とりあえずjsはHTMLの後ろの方で宣言してください

[spraut]

ありがとうございます！
とても参考になりました。
HTMLの後ろのほうで宣言したほうがいいということはscriptタグはhead内でしか書けないというようなルールはないということでしょうか•••？

[yambejp]

jsは基本どこ書いてもよいですが、headかbodyのどこかに書くとよいです
headに書く場合は、html全体が読み込まれた後に実行されるような書き方をする必要があります