Jquery 当用户单击文本时，首先显示内容

我画了一个小草图，你可以看到我的视图实际上是什么样子，我希望它是什么样子：

我希望你能认识到，当用户点击一个章节时，它的子章节会显示在右边的一个框中

实际上，我的视图模板如下所示：

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

我希望你能给我的建议，如何解决我的问题

试试这段代码

<% @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 %>

您可以发布生成的标记吗？这个问题可以通过简单的HTML和jQuery来解决，因此我认为如果您这样做，您将更有可能得到您想要的帮助。