text_fieldの表示、非表示をしたい

Question

text_fieldを、ページを読み込んだときは非表示、ボタンをクリックしたら表示できるようにしたい

Ruby on Rails で金額を入力して決済するシステム(Pay.jp使用)を作っています。
トーク上で金額を決定するため、同じページ上で金額を入力したい。しかし、使用する頻度が低いため、通常は金額入力画面を隠しておきたいという状況です。
text_field非表示→「購入~」ボタンを押す→text_field表示

発生している問題

二通りの方法を試しましたが、それぞれ欠落があります。

1.SCSSで実装
金額入力画面(text_field)が表示されない

2.CoffeeScriptで実装
ページを読み込んだら、既に金額入力画面(text_field)が表示される

該当のソースコード

1.SCSSの場合

<div class = "hidden-box">
   <input type = "checkbox" id = "label1">
   <label for = "label1">購入が決まったらこちら</label>
   <div class = "hidden-show">
         <%= form_with local: true, url: pay_rooms_path do |f| %>
              金額：<%= f.text_field :amount %>
              <script
                 type = "text/text/javascript"
                 src = "https://checkout.pay.jp"
                 class = "payjp-button"
                 data-key = "<%= ENV["PAYJP_PUBLIC_KEY"] %>"
              >
              </script>
              <%= f.submit "カードで支払う", class: "btn btn-primary" %>
          <% end %>
     </div>
</div>

.hidden-box {
    margin-top: 10px;
    margin-bottom: 50px;
    padding: 0;
}

.hidden-box label {
    padding: 8px;
    font-weight: bold;
    color: #fff;
    background-color: #ff0000;
    border-radius: 5px;
    cursor: ponter;
    transition: 0.5s;
}

.hidden-box label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2;
}

.hidden-box input:checked ~ label:before {
    content: '\f00d';
    color: #fff;
}

.hidden-box input {
    display: none;
}

.hidden-box .hidden-show {
    height: 0px;
    padding: 0px;
    opacity: 0;
    transition: 0.8s;
}

.hidden-box input:checked ~ .hidden-show {
    padding-top: 10px;
    height: auto;
    opacity: 1;
}

2.CoffeeScriptの場合

<button class = "button">購入が決まったらこちら</button>
<div class = "target">
   <input class = "amount-area" type = 'hidden'>
   <%= form_with local: true, url: pay_rooms_path do |f| %>
        金額：<%= f.text_field :amount %>
        <script
           type = "text/text/javascript"
           src = "https://checkout.pay.jp"
           class = "payjp-button"
           data-key = "<%= ENV["PAYJP_PUBLIC_KEY"] %>"
        >
        </script>
        <%= f.submit "カードで支払う", class: "btn btn-primary" %>
    <% end %>
</div>

$(document).on 'turbolinks:load', ->
    $target = document.querySelector('.target')
    $button = document.querySelector('.button')
    $button.addEventListener 'click', ->
        $target.classList.toggle 'hidden'
        return

.target {
  background-color: #ea3345;
  padding: 10px;
  line-height: 1.5;
  transition:
    padding-top 500ms,
    line-height 500ms;
}
.target.hidden {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  pointer-events: none;
  opacity: 0;
  display: none;
  visibility: hidden;

}

試したこと

SCSS

• valibilityの使用
• form_withの位置を移動、class追加

CoffeeScript

• $targetの前に.hide()を使用→ボタンを押しても表示されなくなる

補足情報（FW/ツールのバージョンなど）

どちらの方法でも大丈夫ですので、ご回答よろしくお願いします。
(CoffeeScript(+JavaScript)の知識は特に乏しいので、理解に時間がかかります。ご了承ください)

• Ruby 2.6.3
• Rails 5.2.4.5

Answer 1

回答をヒントに別の検索をしましたら、答えにつながりました。

<input type = "button" value = "購入が決まったらこちら" onclick = "clickBtn1()" />
<div id = "p1">
    <%= form_with local: true, url: pay_rooms_path do |f| %>
        金額：<%= f.text_field :amount %>
        <script
        type = "text/text/javascript"
        src = "https://checkout.pay.jp"
        class = "payjp-button"
        data-key = "<%= ENV["PAYJP_PUBLIC_KEY"] %>"
        >
        </script>
        <%= f.submit "カードで支払う", class: "btn btn-primary" %>
    <% end %>
</div>

$(document).on 'turbolinks:load', ->
    document.clickBtn1 = ->
        p1 = document.getElementById('p1')
        if p1.style.display == 'block'
            p1.style.display = 'none'
        else
            p1.style.display = 'block'
        return
        
    document.getElementById('p1').style.display = 'none'

Answer 2

<div class = "target"> を非表示にしておけば画面を開いたときは見えずボタンおしてトグルしてくれるようになるかと。

Comments

[chipot]

ご回答いただきまして、ありがとうございました。
<div class = "target">を非表示にしました。最初は非表示になりましたが、ボタンを押しても非表示のままでした。わたしの理解不足で申し訳ありません。

[winterboum]

jaavascliptとかcssとかは不得意なので、、、
どのように見えなくしたか、でどのように見えるようにするか、は変わってくるのかも。
トグルでの切り替えはくわしくないです。
ので私は 次のようにしています
CSSに .hide {display: none;} 定義して、はじめは見せたくない要素に class='hide'をつけておく
ボタンを押したら removeClass('hide') する