Ruby Checkbox с иконкой теперь показывает / скрывает div при переключении

Question

Простите, что задал этот вопрос, но я дергал себя за волосы, пытаясь это исправить, но я не могу понять, где я все испортил.Я проверил много ответов на SO, которые рекомендуют использовать attr или props в Jquery, что не сработало для меня, поэтому я думаю, что у меня могут быть другие проблемы.

У меня есть код ruby, где у меня есть значок.Когда я нажимаю на этот значок, я хочу показать / скрыть еще один 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>

Я пробовал много вещей, таких как использование реквизита или attr в jquery, но это такжене работает.

РЕДАКТИРОВАТЬ

Это то, что появляется в элементе проверки браузера:

Answer 1

Вы можете попробовать с отображением 'block' и отображением 'none', как я упоминал ниже:

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