javascript html要素をレイアウトを崩さずに表示・非表示を切り替える

javascript html要素をレイアウトを崩さずに表示・非表示を切り替える

javascriptで、style.visibilityを操作して、レイアウトを崩さずにhtml要素を表示・非表示を切り替えるサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

表示・非表示

style.visibilityを操作して、レイアウトを崩さずに表示・非表示を切り替えることが可能です。

サンプルコード

以下は、
「非表示」ボタンをクリックすると、要素が非表示に切り替わり、ボタンのテキストも「表示」に変更され、ボタンをクリックすれば要素が再度表示される
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

表示・非表示が切り替えられていることが確認できます。