I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progresses through the questions, each answer is shown in a separate div until they reach the final result page.
However, I am struggling to find a way to hide these divs until they are populated with content.
All my attempts so far have revolved around using jQuery's $('.div:empty').hide, but without success. Can anyone point out what I might be doing wrong?
Views/Layouts/_user_choices.html.erb
<div class = "default_test" id = "first_bar" >
<% if @category != nil %>
<p><%= @category.title %></p>
<% else %>
<!-- the div remains empty -->
<% end %>
</div>
assets/javascripts/application.js:
$(document).ready(function() {
$('.default_test:empty').hide(); // unfortunately, this does not work as intended
});