jQueryを使わずにjavaScriptのみでアコーディオンメニューを作りたいです。

jQueryを使わずにjavaScriptのみでアコーディオンメニューを作りたいです。
現在のコード状況です。
javaScriptに関しては、他のページのものを参考にclass名を変えて写して書いているので、あまり理解できていないです。
現在のhtml,cssでアコーディオンメニューを作るには、javaScriptをどの様に記述したらできるでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Accordion Menu</title>
6    <link rel="stylesheet" type="text/css" href="main.css">
7  </head>
8  <body>
9    <div class="accordion">
10      <div class="accordion1">
11        <h3 class="accordion-name"><span class="accordion-trigger">∨</span>　　メニュー１</h3>
12        <ul class="accordion-menu">
13          <li class="accordion-item">中身１</li>
14          <li class="accordion-item">中身２</li>
15          <li class="accordion-item">中身３</li>
16        </ul>
17      </div>
18      <div class="accordion2">
19        <h3 class="accordion-name"><span class="accordion-trigger">∨</span>　　メニュー２
20        </h3>
21        <ul class="accordion-menu">
22          <li class="accordion-item">中身１</li>
23          <li class="accordion-item">中身２</li>
24          <li class="accordion-item">中身３</li>
25          <li class="accordion-item">中身４</li>
26        </ul>
27      </div>
28    </div>
29    <script src="main.js" charset="utf-8"></script>
30  </body>
31</html>

css
1.accordion-name {
2  cursor: pointer;
3}
4
5.accordion-menu {
6  list-style-type: none;
7}
8
9.accordion-item {
10  border-bottom: 1px solid #c0c0c0;
11  display: none;
12}

javaScript
1document.addEventListener('DOMContentLoaded', function() {
2  var trigger = document.querySelectorAll('.accordion-name');
3  for (var i = 0; i < trigger.length; i++) {
4    if (trigger[i].classList.contains('is-opened')) {
5        trigger[i].nextElementSibling.getElementsByClassName.height = trigger[i].nextElementSibling.scrollHeight + 'px';
6  }
7    trigger[i].addEventListener('click', function(e) {
8      var currentElement = e.currentTarget;
9      var Target = currentElement.nextElementSibling;
10      if (Target.style.height) {
11        currentElement.classList.remove('is-opened');
12        Target.style.height = null;
13      } else {
14        currentElement.classList.add('is-opened');
15        Target.style.height = Target.scrollHeight + 'px';
16      }
17    });
18  }
19});

kei344

2020/05/05 06:31

（質問文は編集できます）ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。また、エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error