HTML JavaScript hide/show button

Question

I'm working on a little Ruby on Rails application and I'm trying to add a hide/show button which hides a div with some Id. I've followed the steps from this post and it hides the content (second answer). The problem is that the content is not hidden permanently. Once I click in the button, the content dissapears, then the browser do something like an auto refresh and the content appears again.

Could anyone help me with this? It is my first application and my background in javascript is quite poor...

A piece of the code I want to hide/show is the following:

<div id='test'>
  <div class="col_4 patients-list">
    <!-- Patients list -->
    <h5>Patients en cours: <%= @patients.size %></h5>
    <div>
      <% @patients_anomaly.each do |patient| %>
        <div class="patient-anomaly"><%= link_to_patient patient %></div>
      <% end %>
      <% (@patients_to_exit - @patients_anomaly).each do |patient| %>
        <div class="patient-to-exit"><%= link_to_patient patient %></div>
      <% end %>
      <% @patients_normal.each do |patient| %>
        <div class="patient-normal"><%= link_to_patient patient %></div>
      <% end %>
    </div>
  </div>
</div>
<button>Click</button>

and the javascript of the button is:

<script type="text/javascript">
  $("button").click(function() {
    $("#test").toggle('hide');
  });
</script>

Thank you in advance.

@Fallenhero I don't know. I just click the button and for seconds the content disappears, then, suddenly, appears again. — Gonzalo Donoso, Dec 09 '16 at 12:43

score 2 · Answer 1 · answered Dec 09 '16 at 12:40

2

I see that you tagged jQuery, did you try $('#element').hide() and $('#element').show() ?

Documentation for show, Documentation for hide

answered Dec 09 '16 at 12:40

Tapaka

367
4
17

score 2 · Accepted Answer · answered Dec 09 '16 at 12:44

2

You can set type="button" to button because default behavior is submit which submits the page so page is shown in default state.

<button type="button">Click</button>

answered Dec 09 '16 at 12:44

Mairaj Ahmad

14,434
2
26
40

score 1 · Answer 3 · answered Dec 09 '16 at 12:45

1

Instead of this <button>Click</button>, add this

= link_to 'Hide', 'javascript:void(0);', id: 'hideContent'

Then in Javascript

$('#hideContent').on('click', function(){
  $('#test').toggle('hide');
});

This won't reload your page.

Hope that helps!

answered Dec 09 '16 at 12:45

Rajdeep Singh

17,621
6
53
78

I wouldn't do `'javascript:void(0);'` just `''` and in JS `preventDefault()` – Fallenhero Dec 09 '16 at 12:47
Yes, we can do `e.preventDefault()` too, I prefer this. – Rajdeep Singh Dec 09 '16 at 12:48
yes, this works but is again `Unobtrusive JavaScript` – Fallenhero Dec 09 '16 at 12:50

score -1 · Answer 4 · edited Dec 09 '16 at 13:08

-1

<div id='test'></div>
<button id="hide_show">Click</button>
<script>
  $('#hide_show"').click(function(){
    $('#test').toggle();
  });
</script>

edited Dec 09 '16 at 13:08

Deepak Mahakale

22,834
10
68
88

answered Dec 09 '16 at 12:47

kajal ojha

1,248
8
20

2

Please use the [edit] link explain how this code works and don't just give the code, as an explanation is more likely to help future readers. – Jed Fox Dec 09 '16 at 13:32
While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. **Flaggers / reviewers:** [For code-only answers such as this one, downvote, don't delete!](//meta.stackoverflow.com/a/260413/2747593) – Scott Weldon Dec 09 '16 at 20:32

HTML JavaScript hide/show button

4 Answers4