質問: WEBページ上にフロートボタンを設置し、それをクリックすると、 ・ボタンが消える ・問い合わせフォームが出現する という事を実現したいと思っています。 【参考】https://chatplus.jp/support/using/demo/ ※右下のフローティングボタンをクリックすると、問い合わせフォームが表示される ここまでできていること 1.ボタンを用意し、cssのfixで右下に固定表示をした 2.問い合わせフォームを用意し、同様に右下に固定表示をした ここから、教えていただきたいのは 3.ボタンをクリックすると、2の問い合わせフォームが表示される(ボタンが消える) 4.問い合わせフォームに、「小さくする」ボタンを設置し、それをクリックすると、問い合わせフォームが消え、ボタンが表示される です。 参考サイトではriot.jsを用いているようなのですが、同じことができるようなJavascriptのライブラリ、またはそれを紹介しているサイトがありましたら教えていただきたく。 またはJavascriptでなくても、cssで実現できるならば、それでもかまいません。
回答: 以下はライブラリを使わないピュアなjsでの方法です。 やること自体は分かってもらえると思うのでライブラリを使いたい場合は、 jQueryを使えばもっと簡潔に書けます。 コードがないため、フロートボタンとフォームの位置が干渉する可能性はありますが、 単純にonclickイベントを使って表示/非表示を切り替えているだけです。 toggleをうまく使えばもっと短くて済みそうですが、それは別途考えてみて下さい。 以下のコードについてはテストしてないので動くかどうかは分かりませんので ご自身の環境に合わせて変えてください。 ``` var target = document.getElementById("floatButton"); //フロートボタンを直指定 var target2 = document.getElementById("formBox"); //フォームを囲う箱を指定 var target3 = document.getElementById("formButton"); //フォーム内のボタンを指定 target.onclick = function() { target.style.display="none"; //フロートボタンを非表示 target2.style.display="block"; //フォームを表示 }; target3.onclick = function() { target3.style.display="none"; //フォームを非表示 target.style.display="block"; //フロートボタンを表示 }; ```