javascript - Ruby on Rails jQuery: トグルが機能しない

Question

div を表示/非表示にするボタンを作成しようとしています。比較的簡単に思えますが、このボタンをクリックすると更新が行われ、クリックし続けるとページの大部分が非表示になります。これが私がこれまでに持っているものです。また、それが重要かどうかはわかりませんが、ほとんどのcssにファンデーションを使用しています

アプリケーション.js

$(function() {
  $(document).foundation();
});

$(document).ready(function() {

    $('#message_button').click(function() {
        $("#messages").toggle();
    });

});

_userindex.html

    <div class="row">
      <div class="small-12 columns new-button">
        <%= link_to 'New Job', new_job_path, class: 'button' %>
      </div>
    </div>

    <div class="section-container auto" data-section>
      <section>
        <p class="title" data-section-title><a href="#panel1">Active Jobs</a></p>
        <div class="content" data-section-content>
          <% if @active.present? %>
            <ul>
              <% @active.each do |job| %>
                <li class='panel'>

                  <div class="row">
                    <div class="small-12 columns">
                      <div class="row">
                        <div class="large-6 columns">
                          <span id="location"><strong>location</strong>: <%= job.location %></span>
                        </div>
                        <div class="large-6 columns">
                          <span id="status"><strong>status</strong>: <%= job.status %></span>
                        </div>
                      </div>
                      <div class='light panel bottom'>
                        <strong>job: <%= link_to job.name, job %></strong><br>
                        <%= job.description %>
                      </div>
                    </div>
                  </div>

                  <div class="row job-buttons">
                    <div class="small-6 columns">
    MESSAGES BUTTON -->>>  <%= link_to 'messages', '', class: 'button small secondary', id: "message_button" %>
                    </div>
                    <div class="small-6 columns">
                      <%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %>
                    </div>
                  </div>

                  <br />


I WANT TO HIDE THIS ENTIRE DIV ---->>>>  <div id="messages">
                    <div class="row">
                      <div class="small-12 columns">
                        <div class="panel">
                          <%= form_for(@message) do |f| %>
                            <%= f.label :body, "Description" %>
                            <%= f.text_area :body %>
                            <%= f.hidden_field :job_id, value: job.id %>
                            <%= f.submit 'Create message', class: 'button small secondary' %>
                          <% end %>
                        </div>
                      </div>
                    </div>

                    <% jobs_messages = job.messages %>
                    <% if jobs_messages.present? %>
                      <ul>
                        <% jobs_messages.each do |m| %>
                        <% if m.user_id.present? %>
                          <% user = m.user %>
                        <% else %>
                          <% user = m.runner %>
                        <% end %>
                          <li class='panel'>
                            <div class='row'>
                              <div class='small-12 columns'>
                                <p> From: <%= user.login %> </p>
                                <p> Body: <%= m.body %>
                              </div>
                            </div>
                          </li>
                        <% end %>
                      </ul>
                    <% else %>
                      <div class="empty panel">
                        <p>no messages at the moment</p>
                      </div>
                    <% end %>
                  </div>

                </li>
              <% end %>
            </ul>
          <% else %>
            <div class="empty panel">
              <p>no active jobs at the moment</p>
            </div>
          <% end %>
        </div>
      </section>
      <section>
        <p class="title" data-section-title><a href="#panel2">Completed Jobs</a></p>
        <div class="content" data-section-content>
          <% if @completed.present? %>

          <% else %>
            <div class="empty panel">
              <p>no completed jobs yet</p>
            </div>
          <% end %>
        </div>
      </section>
    </div>

ID「message_button」のlink_toボタンへの$().clickアクションを試みています。このボタン/リンクがクリックされるたびに、「メッセージ」divを表示/非表示にしたい.

私は jQuery、Rails、Foundation を初めて使用するので、何か重要なことがある場合に備えて、ほとんどのコードを残しました。ただし、me​​ssage_button とメッセージ div をマークして、見つけやすくしました。