アコーディオンパネルがうまく使えない[Ruby on Rails]

前提・実現したいこと

ruby on rails を使ってメモ機能を作っています。
メモのタイトルのみをブラウザ上で表示→クリックすると本文が見えるという
アコーディオンパネルを実装しようとしています。
現在cssでの実装をしました。
一番上のタイトルをクリックするとアコーディオンパネルが作動し内容を見ることができますが、
その他のタイトルをクリックしても一番上のメモ内容が開かれてしまいます。

例）　
タイトルA
ーーーーAの内容ーーーー
タイトルB
タイトルC

・タイトルAを押すと「Aの内容」がみれる
・タイトルB、タイトルCを押しても「Aの内容」が見れる状態←（ここ直したい）

該当のソースコード

memos/index.html.erb


<% @memos.each do |memo| %>
  <div class="title-frame">
  <input id="memo-check" class="memo-check" type="checkbox">
    <label class="memo-label", for="memo-check"><%= memo.title%></label>
    <div class="memo-content">
    <p><%= memo.content%></p>
    </div>
  </div>
<% end %>

該当CSS

.memo-check{
  display: none;
}
.memo-label {
  background: #333;
  color: #fff;
  display: block;
  margin-bottom: 1px;
  padding: 10px;
}
.memo-content{
  border: 1px solid #333;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
}
.memo-check:checked + .memo-label + .memo-content {
  height: 100%;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}