RailsのAjax機能の追加(任意のもの以外の表示、非表示機能)

前提・実現したいこと

プログラミング初心者です。
RailsでToDOアプリを作っています。

画像のようにボタンを押したとき更新、作成日時を非表示する機能を作りました。

そこで更に優先順位１以外のタスクを　新規作成するボタンを押したときに表示、非表示する機能を追加したいのです。
今の所優先順位が高い順にタスクが表示されるように設定しています。
優先順位２以上のタスクを表示、非表示にするにはどうすればいいでしょうか？
またこの問題を解決するにはどういう前提知識が必要になりますでしょうか？
よろしくおねがいします。

追記：> 優先順位１以外のタスクをボタンを押したときにこのボタンはどのHTMLタグになりますか？
仮で<b>タグにする予定です。

該当のソースコード　質問が初めてなので、載せれるだけ載せます。足りない情報があれば指摘していただけると助かります。

show.html.erb

<% if @user.tasks.any? %>
    <span class="btn-sticky">すべての更新、作成日時を表示,非表示</span>
    <% @user.tasks.each do |task| %>
      <section class="panel">
        <div class="panel-left">
          <ul class="checkbox">
            <%= check_box_tag '', '', task.done, {'data-id' => task.id} %>
            <h2>ToDo:<%= task.title %></h2>
            <h2>メモ:<%= task.content %></h2>
            <h2>優先順位:<%= task.priority %></h2>
            <li><h3>更新日時:<%= task.updated_at.to_s(:datetime_jp) %></h3>
              <h3>作成日時:<%= task.created_at.to_s(:datetime_jp) %></h3></li>
          </ul>
        </div>
        <div class="panel-right">
          <%= link_to(content_tag(:i, '', class: "fas fa-trash-alt fa-3x faa-horizontal animated-hover fa-pull-right", style: "color: #00C0FE;"), task_path(task.id), method: :delete, data: {confirm: "本当に削除しますか？"}) %>
          <%= link_to(content_tag(:i, '', class: "fas fa-edit fa-3x faa-vertical animated-hover fa-pull-right", style: "color: 00C0FE"), edit_task_path(task.id)) %>
      </section>
    <% end %>
    <li class="active">
      <%= paginate @tasks %>
    </li>

    <!--ボタンが押されたら更新・作成日時を非表示にする。h3がターゲット-->
    <script>
        $("span").click(function () {
            $("h3").toggle("slow");
        });
    </script>
    <!--Ajaxでチェックボタンを動的にする-->
    <script>
        $(function () {
            $("input[type=checkbox]").click(function () {
                $.post('/tasks/' + $(this).data('id') + '/toggle');
            });
        });
    </script>
    </div>
  <% end %>

tasks_controller.rb

class TasksController < ApplicationController
  before_action :logged_in_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy
  skip_before_action :verify_authenticity_token
  
  def index
  end
  
  def new
    @task = Task.new
  end
  
  def edit
    @task = Task.find(params[:id])
  end
  
  def create
    @task = current_user.tasks.build(task_params)
    if @task.save
      flash[:success] = "｢#{@task.title}｣を作成しました！"
      redirect_to user_path(current_user)
    else
      render 'tasks/new'
    end
  end
  
  def update
    @task = Task.find(params[:id])
    if @task.update(task_params)
      flash[:success] = "｢#{@task.title}｣に変更しました！"
      redirect_to user_path(current_user)
    else
    render 'edit'
    end
  end
  
  def destroy
    @task.destroy
    flash[:danger] = "｢#{@task.title}｣を削除しました!"
    redirect_to request.referrer || root_url
  end
  
  def toggle
    head :no_content
    task = Task.find(params[:id])
    task.done = !task.done
    task.save
  end
  
  private

  #ストロングパラメーター
    def task_params
      params.require(:task).permit(:title, :content, :priority)
    end
    
    def correct_user
      @task = current_user.tasks.find_by(id: params[:id])
      redirect_to root_url if @task.nil?
    end
end

users_controller.rb

class UsersController < ApplicationController
  before_action :logged_in_user, only: [:index, :edit, :update, :destroy]
  before_action :correct_user, only: [:edit, :update]
  before_action :set_target_user, only: [:destroy, :edit, :update]
  # before_action :admin_user,     only: :destroy

  def index
  end

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      log_in @user
      flash[:success] = "ユーザー登録に成功しました!"
      redirect_to @user
    else
      render 'new'
    end
  end

  def destroy
    @user.destroy
    flash[:success] = "退会しました。#{@user.name}さん。ご利用ありがとうございました！"
    redirect_to root_url
  end

  def edit
  end

  def update
    if @user.update_attributes(user_params)
      flash[:success] = "変更しました"
      redirect_to @user
    else
      render 'edit'
    end
  end

  private

  #ストロングパラメーター
  def user_params
    params.require(:user).permit(:name, :email, :password,
                                 :password_confirmation)
  end

  #リファクタリング用
  def set_target_user
    @user = User.find(params[:id])
  end

  # 正しいユーザーかどうか確認する
  def correct_user
    @user = User.find(params[:id])
    redirect_to(root_url) unless current_user?(@user)
  end

  # 管理者かどうか確認する
  def admin_user
    redirect_to(root_url) unless current_user.admin?
  end
end

task.rb

class Task < ApplicationRecord
  belongs_to :user
  default_scope -> { order(priority: :asc) }
  validates :priority, numericality: {message: '数値を入力してください！'},
            uniqueness: {message: 'すでに設定したリストと優先順位がかぶっています'}
  validates :title, presence: {message: 'タイトルを入力してください'},
            length: {minimum: 2, message: '2文字以上で入力してください'}
  validates :content, length: {maximum: 50, message: '登録できるのは50文字までです'}
end

試したこと

<script>
        $("span").click(function () {
            $("h3").toggle("slow");
        });
</script>

の部分を色々試してみましたが機能しませんでした・・・

補足情報（Gemfile）

rails 5.1.7

no1knows

2020/08/13 10:42

> 優先順位１以外のタスクをボタンを押したときにこのボタンはどのHTMLタグになりますか？

White_fox

2020/08/13 11:23

指摘ありがとうございます。そして編集が遅れてすみません。質問の意味を完全に理解してなくて頓珍漢な編集だったら申し訳ないです。

no1knows

2020/08/13 12:06

これから作るボタンを押すと、優先順位1・2のタスクが表示される。3以下は表示されない。もう一度押すと、すべてのタスクが表示される。という機能を追加したいが、どのようにすれば実現できるのかが知りたいということで良いでしょうか？

White_fox

2020/08/13 13:09 編集

わかりにくい説明で申し訳ないです。これから作るボタンを押すと、優先順位1のタスクが表示されるが、優先順位2以下が表示されない。もう一度押すとすべてのタスクが表示されるという機能を追加したいです。どのようにすれば実現できるのかが知りたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

引用テキストこれから作るボタンを押すと、優先順位1のタスクが表示され優先順位2,3,4,5 ・・・・ｎが表示されない。

簡単に実装する方法の1つとして下記はいかがでしょうか？

①ボタンを作る

②セクションに優先順位1じゃないときにnot-priority-1クラスを追加する
<section class="panel <%= "not-priority-1" if task.priority != 1 %>">

③①のボタンを押したら、jQueryで.not-priority-1を非表示(.hide())にする

投稿2020/08/13 13:14

no1knows

総合スコア3365

White_fox

2020/08/13 13:26

①<button>優先順位2以下を非表示</button> ②<section class="panel <%= "not-priority-1" if task.priority != 1 %>"> ③<script> $("button").click(function () { $(".not-priority-1").toggle("hide"); }); </script> と記述して、試したところ期待していた機能になりました！ありがとうございました！