クリックで開閉アコーディオンメニューの作成例 jQuery、CSSのみ

<div class="accordion">
  <input type="checkbox" id="acc01">
  <label for="acc01">アコーディオン1</label>
  <div class="acc-content">
    アコーディオン1　が開いた時のコンテンツ
  </div>
  <input type="checkbox" id="acc02">
  <label for="acc02">アコーディオン2</label>
  <div class="acc-content">
    アコーディオン2　が開いた時のコンテンツ
  </div>
  <input type="checkbox" id="acc03">
  <label for="acc03">アコーディオン3</label>
  <div class="acc-content">
    アコーディオン3　が開いた時のコンテンツ
  </div>
</div>

checkboxのid属性とlabelのfor属性はワンセットで同じ名前を入れておきます。

.accordion label {
  position: relative
  display: block;
  cursor: pointer;
}
.accordion input {
  position: absolute;
  left: -999em;
}
.accordion input:checked + label + .acc-content {
  max-height: 1000px;
  transition: max-height 0.4s ease-in-out;
}
.acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

checkboxは表示させないのでposition:absoluteで枠外へ飛ばしておきます。

クリックした時に表示するコンテンツ.acc-contentは初期状態で表示しないようCSSで設定する必要があります。

display:none/display:blcokで表示、非表示を切り替えることも可能ですが、コンテンツの開閉をアニメーションさせたいのでdisplayプロパティは使わずにmax-height:0にしておきます。

checkboxがチェックされたら（input:checked）.acc-contentが表示されるようにmax-heightに大きい値を指定します。

radioボタンを使ったアコーディオン

See the Pen Accordion CSSのみ radio by mixtaro (@mixtaro) on CodePen.

<div class="accordion">
  <input type="radio" id="acc01" name="accgroup">
  <label for="acc01">アコーディオン1</label>
  <div class="acc-content">
    アコーディオン1　が開いた時のコンテンツ
  </div>

  <input type="radio" id="acc02" name="accgroup">
  <label for="acc02">アコーディオン2</label>
  <div class="acc-content">
    アコーディオン2　が開いた時のコンテンツ
  </div>

  <input type="radio" id="acc03" name="accgroup">
  <label for="acc03">アコーディオン3</label>
  <div class="acc-content">
    アコーディオン3　が開いた時のコンテンツ
  </div>
</div>

<dl>
  <dt>アコーディオン1</dt>
  <dd>アコーディオン1の中身</dd>
  <dt>アコーディオン2</dt>
  <dd>アコーディオン2の中身</dd>
  <dt>アコーディオン3</dt>
  <dd>アコーディオン3の中身</dd>
</dl>

$(function(){
   $("dt").on("click", function(){
      $(this).next().slideToggle();
      $(this).toggleClass("active");
   });
});

dd {
  display: none;
}

<div class="accordion">
  <div class="accordion-item">
    <h3>アコーディオン　タイトル</h3>
    <div class="answer">
      <p>アコーディオン　コンテンツ</p>
    </div>
  </div>
</div>

$(function(){
  $(".accordion-item .answer").hide();

  $(".accordion-item h3").on("click", function(){
    var $answer = $(this).next(".answer");
    $answer.slideToggle();
    $(this).toggleClass("active");

  });
});

.acdmenu dd {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.acdmenu dt[aria-expanded=true] + dd {
  max-height: 1000px;
  transition: max-height 0.3s ease-out;
}

// 最初の li 要素を開く
firstAccordionItem.setAttribute('aria-expanded', true);
const firstUl = firstAccordionItem.querySelector('ul');
if (firstUl) {
  firstUl.style.display = 'block';
}