はじめに
ユーザーたちがコメントして交流できるようにしたい！という思いでコメント機能を実装したものの、コメントによってネタバレが起きてしまったり、コメントは表示させたくない！というユーザーのニーズに応えるため、コメントの表示/非表示切替を実装しました！
※教材7-6コメント機能をつけてみよう が完了している前提の記事になります！
HTMLの記述(今回showページに記述)
show.html.erb
#showのコメントの部分を以下のように訂正
<div class="comment-wrapper">
<button id="toggle-comments" class="btn btn-secondary">
コメントを表示
</button>
<div id="comments" style="display: none;">
<p>コメント一覧</p>
<% @comments.each do |c| %>
<div>
<%= c.user.name unless c.user.blank? %>
<br>
<%= c.content %>
</div>
</br>
<% end %>
<% if user_signed_in? %>
<%= form_with(model: [@〇〇(変数名), @comment], local: true) do |f| %>
<%= f.text_area :content %>
<%= button_tag type: "submit" do %>
<i class="far fa-comments"></i> コメントする
<% end %>
<% end %>
<% end %>
</div>
</div>
※以下省略
javascript/packs/application.jsに下記を追加
application.js
document.addEventListener('turbolinks:load', () => {
const toggleButton = document.getElementById('toggle-comments');
const commentsDiv = document.getElementById('comments');
if (toggleButton && commentsDiv) {
toggleButton.addEventListener('click', () => {
if (commentsDiv.style.display === 'none') {
commentsDiv.style.display = 'block';
toggleButton.textContent = 'コメントを非表示';
} else {
commentsDiv.style.display = 'none';
toggleButton.textContent = 'コメントを表示';
}
});
}
});
これらの記述が完了すると、コメントを表示/コメントを非表示というボタンが追加されると思います！
是非やってみてください！
おわりに
大学生限定プログラミングコミュニティのGeekSalonでメンターをしてます！
大学生でプログラミング気になる人はぜひHP見てみてね
要チェック！大学生限定プログラミングコミュニティGeekSalon