はじめに

ユーザーたちがコメントして交流できるようにしたい！という思いでコメント機能を実装したものの、コメントによってネタバレが起きてしまったり、コメントは表示させたくない！というユーザーのニーズに応えるため、コメントの表示/非表示切替を実装しました！

※教材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