jquery - ユーザーがテキストをクリックしたときにコンテンツを最初に表示する

Question

私のビューが実際にどのように見えるか、どのようになりたいかを確認できる小さなスケッチを作成しました。

ユーザーが 1 つのチャプターをクリックすると、そのサブチャプターが右側のボックスに表示されることをどのように認識できるか。

実際、私のビュー テンプレートは次のようになります。

<% @chapter.each do |chapter| %>
  <%= chapter.number %><%= chapter.description %>
  </p>
  <% chapter.subchapter.split(';').each do |subchapter| %>
     <%= subchapter %>
     </p>
  <% end %>
<% end %>

私の問題を解決する方法を教えていただければ幸いです。

Answer 1

このコードを試してください..

<% @chapter.each do |chapter| %>
  <%= chapter.number %><%= link_to_function chapter.description, "$(\"#\"+#{chapter.id}\").toggle()" %>
  </p>
<div id=<%= chapter.id %> style="display: none;">
  <% chapter.subchapter.split(';').each do |subchapter| %>
     <p>
     <%= subchapter %>
     </p>
  <% end %>
</div>
<% end %>