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.

Sam Kotlove · Accepted Answer · 2017-03-30 15:40:51Z

4

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>

edited Mar 30, 2017 at 15:40

answered Mar 30, 2017 at 15:37

Sam Kotlove

1967 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zack Herbert Over a year ago

sorry that was a typo on my part it is display: none

Sam Kotlove Over a year ago

@ZackHerbert Are you sure that doesn't fix your issue? In my code snippet I added your code works fine now. Do you have jquery?

Zack Herbert Over a year ago

My example was just typed wrong, it was set to display: none; I just typed it wrong in my code snippet above. I also included the Jquery at the top of the html.erb file like shown above...

Sam Kotlove Over a year ago

@ZackHerbert Your src tag at the top has http and not https, try the latter?

Zack Herbert Over a year ago

I appreciate your help, but I decided to use bootstrap collapse to solve my problem. I know that my code should have worked, but I couldn't determine what was going wrong, the bootstrap solution also really simplifies everything so that I wouldn't have to repeat the jquery code 4 more times for each of the sections that I wanted to be able to toggle

Zack Herbert · Accepted Answer · 2017-03-30 16:12:53Z

1

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>

answered Mar 30, 2017 at 16:12

Zack Herbert

9601 gold badge16 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related