Reputation: 6781
JQuery isn't behaving the way I expect it to behave. The following code only makes the h1-tag disappear for about a second before it reappears. I have no idea what I am doing wrong and would appreciate any help. The code is a Rails-View. If you need more context let me know what you need. Any help is high welcome..
<% provide(:title, 'Home') %>
<div class="center jumbotron">
<h1 class="question_answer"></h1>
<br>
<br>
<%= link_to "Show answer", '#', class: "btn btn-lg btn-primary",
id: "show" %>
<%= link_to "Next question", '#', class: "btn btn-lg btn-primary",
id: "next" %>
</div>
<%= link_to "Back", home_user_path(@user),
class: "btn btn-sm btn-primary" %>
<%= javascript_tag do %>
$(document).ready(function() {
var
JsVocabs = <%= raw @vocabs.to_json %>,
n = 0;
$('#next').hide();
$('h1').text(JsVocabs[n].front);
$('#show').on('click', function() {
$('h1').toggle();
});
});
<% end %>
Upvotes: 0
Views: 44
Reputation: 318372
Try preventing the default action
$('#show').on('click', function(e) {
e.preventDefault();
$('h1').toggle();
});
Upvotes: 1