带有图标的Ruby Checkbox现在在切换时显示/隐藏div

Question

原谅我问这个问题，但是我一直在努力解决这个问题，但我不明白自己在搞什么。我在SO上检查了很多答案，这些答案建议在Jquery中使用attr或props对我不起作用，因此我认为我可能会遇到其他问题。

我在有图标的地方有红宝石代码。当我单击此图标时，我想显示/隐藏另一个div。

我的ROR代码：

<div class="choice <%= 'active' if listing.payment_term_shortterm == 'on' %>" data-toggle="wizard-checkbox">

    <%= form.check_box :payment_term_shortterm,  id: "payment_term_shortterm_test" %>

    <div class="card card-checkboxes card-hover-effect">
        <i class="ti-home"></i>
        <p>Small Time</p>
    </div>

</div>  

以上这些内容在我的网站中创建了以下图标：

我只希望如果单击Small Time，则显示另一个div。到目前为止，我的Jquery：

$(function () {
    $("#payment_term_shortterm_test").click(function () {
        if ($(this).is(":checked")) {
            $("#SmallTimeShow").show();
        } else {
            $("#SmallTimeShow").hide();
        }
    });
});

并且该jquery应该显示以下div：

<div id="SmallTimeShow" style="display: none;">

    <div class="form-group">
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <p> Hi Loan for Small time.</p>
            </div>
        </div>
    </div>
</div>

我尝试了很多事情，例如在jquery中使用props或attr，但它也没有用。

编辑

这就是浏览器检查元素中显示的内容：

Answer 1

您可以尝试使用显示“阻止”并显示“无”，如下所述：

$('#payment_term_shortterm_test').change(function() {
  if($(this).is(":checked")) {
    $("#SmallTimeShow").css('display','block');
  }
  else{
    $("#SmallTimeShow").css('display','none');
  }       
});