HTML JavaScript hide/show button

Question

Я работаю над небольшим приложением Ruby on Rails, и я пытаюсь добавить кнопку hide/show, которая скрывает div с некоторым Id. Я выполнил шаги от this, и он скрывает контент (второй ответ). Проблема в том, что контент не скрывается постоянно. Как только я нажимаю кнопку, содержимое исчезает, тогда браузер делает что-то вроде автоматического обновления, и содержимое появляется снова.

Может ли кто-нибудь помочь мне с этим? Это мое первое приложение, и мой фон в JavaScript довольно беден ...

Кусок кода, который я хочу, чтобы скрыть/показать следующий:

<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> 

и Javascript кнопки является:

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

Заранее спасибо.

Answer 1

Вы можете установить type="button" в button потому что поведение по умолчанию submit которые submits страницу, чтобы страница отображается в default state.

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

Answer 2

Я вижу, что вы отметили jQuery, вы попробовали $('#element').hide() и $('#element').show()?

Documentation for show, Documentation for hide

Answer 3

Вместо этого <button>Click</button>, добавьте

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

Тогда в Javascript

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

Это не будет перезагрузить страницу.

Надеюсь, что это поможет!

Answer 4

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