はじめに
自作のRailsアプリケーションでもっと見るボタンを実装したのでメモ。以下のようなイメージで投稿した記事を最初に折りたたんだ状態で「もっと見る」ボタンを押すと全文を表示させるというものです。
実装方法
※筆者はindexページで実装しています。
また今回はJQueryでAjaxを使わずに行います。
まず手を加える前のコードは以下のようになっています。
index.html.erb
<% @posts.each do |post| %>
<%= post.body%>
<% end %>
今回は200文字以上の場合にもっと見るボタンを付け足すと想定します。
index.html.erb
<div class="content-body">
<% @posts.each do |post| %>
<%if post.body.length > 200 %>
<p><%= post.body.truncate(200)%></p>
<p><もっと見る></p>
<%else%>
<p><%= post.body %></p>
<%end%>
<% end %>
</div>
上記のようにif文で200文字以上の時は文字をtruncate
で省略し200文字未満の場合はそのまま表示します
次にJQueryを使うための追記をします。
以下のように追記をします。
<div class="content-body">
<% @posts.each do |post| %>
<%if post.body.length > 200 %>
<!--追記-->
<div class="truncated">
<p><%= post.body.truncate(200)%></p>
<!--class="see-more"を追記-->
<p class="see-more"><もっと見る></p>
</div>
<!-- 追記 style= "display: noneで 通常時は見えなくする-->
<div class="untruncated" style="display: none">
<p><%= post.body %></p>
</div>
<% else %>
<p><%= post.body %></p>
<% end %>
<% end %>
</div>
追記した部分はコメントを追加しています。
最後にjsを設定します
jsファイル
$('.see-more').click(function(){
$(this).closest(".content-body").find(".truncated").hide();
$(this).closest(".content-body").find(".untruncated").show();
})
以上を設定すると実装完了です。
説明するとsee-more
をクリックした時に(1行目)その1番近い親要素であるcontent-body
の中のtruncated
を隠す(2行目)。そのあとcontent-body
の中のuntruncated
を表示させる(3行目)
以上になります。