Show/Hide div element with rails view html.erb file

Question

I am trying to show/hide certain divs depending on the click of a button/link. I have done some reading on how to do this with JQuery, but it doesn't seem to be working.

edit.html.erb

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="pad-bottom">
  <a id="edit-profile-button" class="button default ok" href="#">
    Edit Profile
  </a>
  <div id="profile-information" class="hidden">
    <div class="row pad-top">
      <div class="col-xs-6 col-sm-6 field-row">
        <div class="roboto bold black field-label">
          First
        </div>
        <%= f.text_field :first_name, class: 'field', placeholder: 'First Name'%>
      </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(event){
    $('#edit-profile-button').click(function(){
      event.preventDefault();
      $('#profile-information').toggle();
    });
  });
</script>

application.css

.hidden {
  display: none;
}

I can click on the link and fall into a debugger and access the two elements that I try to select in the jQuery code, but it doesn't seem do be doing anything at all, the div is never made visible.

Answer 1

Your css has an issue, hidden is not a valid value for display. It should be:

  $(document).ready(function(){
    $('#edit-profile-button').click(function(){
      $('#profile-information').toggle();
    });
  });

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pad-bottom">
  <a id="edit-profile-button" class="button default ok">
    Edit Profile
  </a>
  <div id="profile-information" class="hidden">
    <div class="row pad-top">
      <div class="col-xs-6 col-sm-6 field-row">
        <div class="roboto bold black field-label">
          First
        </div>
        <%= f.text_field :first_name, class: 'field', placeholder: 'First Name'%>
      </div>
  </div>
</div>

Answer 2

Ended using bootstrap to solve my problem (http://getbootstrap.com/javascript/#collapse)

edit.html.erb

<div class="pad-bottom">
  <a id="edit-profile-button" class="button default ok" href="#profile-information" data-toggle="collapse" aria-expanded="false">
    Edit Profile
  </a>
  <div id="profile-information" class="collapse">
    <div class="row pad-top">
      <div class="col-xs-6 col-sm-6 field-row">
        <div class="roboto bold black field-label">
          First
        </div>
        <%= f.text_field :first_name, class: 'field', placeholder: 'First Name'%>
      </div>
  </div>
</div>