title: Ruby on Rails jQuery: Toggle not working
body: <p>I am trying to create a button that shows/hides a div. It seems relatively easy, but whenever I click this button, it just does a refresh, and when I keep clicking it, it hides most of my page. Here is what I have so far. Also, I dont know if it matters but I am using foundation for most of the css</p>
  
  <p>application.js</p>
  
  <pre><code>$(function() {
    $(document).foundation();
  });
  
  $(document).ready(function() {
  
      $('#message_button').click(function() {
          $("#messages").toggle();
      });
  
  });
  </code></pre>
  
  <p>_userindex.html</p>
  
  <pre><code>    &lt;div class="row"&gt;
        &lt;div class="small-12 columns new-button"&gt;
          &lt;%= link_to 'New Job', new_job_path, class: 'button' %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="section-container auto" data-section&gt;
        &lt;section&gt;
          &lt;p class="title" data-section-title&gt;&lt;a href="#panel1"&gt;Active Jobs&lt;/a&gt;&lt;/p&gt;
          &lt;div class="content" data-section-content&gt;
            &lt;% if @active.present? %&gt;
              &lt;ul&gt;
                &lt;% @active.each do |job| %&gt;
                  &lt;li class='panel'&gt;
  
                    &lt;div class="row"&gt;
                      &lt;div class="small-12 columns"&gt;
                        &lt;div class="row"&gt;
                          &lt;div class="large-6 columns"&gt;
                            &lt;span id="location"&gt;&lt;strong&gt;location&lt;/strong&gt;: &lt;%= job.location %&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="large-6 columns"&gt;
                            &lt;span id="status"&gt;&lt;strong&gt;status&lt;/strong&gt;: &lt;%= job.status %&gt;&lt;/span&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class='light panel bottom'&gt;
                          &lt;strong&gt;job: &lt;%= link_to job.name, job %&gt;&lt;/strong&gt;&lt;br&gt;
                          &lt;%= job.description %&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="row job-buttons"&gt;
                      &lt;div class="small-6 columns"&gt;
      MESSAGES BUTTON --&gt;&gt;&gt;  &lt;%= link_to 'messages', '', class: 'button small secondary', id: "message_button" %&gt;
                      &lt;/div&gt;
                      &lt;div class="small-6 columns"&gt;
                        &lt;%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;br /&gt;
  
  
  I WANT TO HIDE THIS ENTIRE DIV ----&gt;&gt;&gt;&gt;  &lt;div id="messages"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="small-12 columns"&gt;
                          &lt;div class="panel"&gt;
                            &lt;%= form_for(@message) do |f| %&gt;
                              &lt;%= f.label :body, "Description" %&gt;
                              &lt;%= f.text_area :body %&gt;
                              &lt;%= f.hidden_field :job_id, value: job.id %&gt;
                              &lt;%= f.submit 'Create message', class: 'button small secondary' %&gt;
                            &lt;% end %&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;% jobs_messages = job.messages %&gt;
                      &lt;% if jobs_messages.present? %&gt;
                        &lt;ul&gt;
                          &lt;% jobs_messages.each do |m| %&gt;
                          &lt;% if m.user_id.present? %&gt;
                            &lt;% user = m.user %&gt;
                          &lt;% else %&gt;
                            &lt;% user = m.runner %&gt;
                          &lt;% end %&gt;
                            &lt;li class='panel'&gt;
                              &lt;div class='row'&gt;
                                &lt;div class='small-12 columns'&gt;
                                  &lt;p&gt; From: &lt;%= user.login %&gt; &lt;/p&gt;
                                  &lt;p&gt; Body: &lt;%= m.body %&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/li&gt;
                          &lt;% end %&gt;
                        &lt;/ul&gt;
                      &lt;% else %&gt;
                        &lt;div class="empty panel"&gt;
                          &lt;p&gt;no messages at the moment&lt;/p&gt;
                        &lt;/div&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
  
                  &lt;/li&gt;
                &lt;% end %&gt;
              &lt;/ul&gt;
            &lt;% else %&gt;
              &lt;div class="empty panel"&gt;
                &lt;p&gt;no active jobs at the moment&lt;/p&gt;
              &lt;/div&gt;
            &lt;% end %&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;p class="title" data-section-title&gt;&lt;a href="#panel2"&gt;Completed Jobs&lt;/a&gt;&lt;/p&gt;
          &lt;div class="content" data-section-content&gt;
            &lt;% if @completed.present? %&gt;
  
            &lt;% else %&gt;
              &lt;div class="empty panel"&gt;
                &lt;p&gt;no completed jobs yet&lt;/p&gt;
              &lt;/div&gt;
            &lt;% end %&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to an $().click action to the link_to button with id "message_button". Whenever this button/link is clicked, I want it to show/hide the "messages" div.</p>
  
  <p>I am new to jQuery, rails, and foundation, so I left most of the code just in case anything was important. But I marked the message_button and the message div to help you better find it.</p>