フロートボタンをクリックすると、同じく上に問い合わせフォームが表示されるようなＵＩ

Question

ＷＥＢページ上にフロートボタンを設置し、それをクリックすると、
・ボタンが消える
・問い合わせフォームが出現する
という事を実現したいと思っています。

【参考】https://chatplus.jp/support/using/demo/　
※右下のフローティングボタンをクリックすると、問い合わせフォームが表示される

ここまでできていること
１．ボタンを用意し、cssのfixで右下に固定表示をした
２．問い合わせフォームを用意し、同様に右下に固定表示をした

ここから、教えていただきたいのは
３．ボタンをクリックすると、２の問い合わせフォームが表示される（ボタンが消える）
４．問い合わせフォームに、「小さくする」ボタンを設置し、それをクリックすると、問い合わせフォームが消え、ボタンが表示される

です。

参考サイトではriot.jsを用いているようなのですが、同じことができるようなJavascriptのライブラリ、またはそれを紹介しているサイトがありましたら教えていただきたく。
またはJavascriptでなくても、cssで実現できるならば、それでもかまいません。

Answer 1

以下はライブラリを使わないピュアな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";  //フロートボタンを表示
};

Comments

[mikan_s4n]

ちなみにアニメーションまで掛けてリッチな見た目にしたい場合はCSSのアニメーション等で行えます。
アニメーションに関してはcss単体でもいけそうな気がしますが、手っ取り早いのはアニメーションを
定義しておいた専用のclassを用意しておき、onclickイベントでclassの付け替えを行うのが確実で手っ取り早いかなと思います。
cssのアニメーションに関しては複雑で難しいですが、jsでアニメーションを書けるよりもよっぽどスムーズで高速なので、cssをオススメします。
jQueryは要素に対するアニメーション処理が豊富ですが、どうしてもスムーズに行かない場合もあるので、コールバック処理などが必要でないのならアニメーション処理はcssに任せてしまう方がjsのコードがスッキリするでしょう。
ただ、cssは複雑化し、余人には手が出せない状況となる場合も多々あります。
cssのアニメーションはコードを見ただけでは簡単には想像できませんので…。

[TEKA-e1]

ありがとうございました！
どうすればよいのかが分かり、jQueryを利用していたので、そちらで書いてみました。

$('.formBox').hide();
$('.floatButton img').click(function(){
$(".floatButton").hide();
$(".formBox").show();
});
$('.hide-button').click(function(){
$(".floatButton").hide();
$(".formBox").hide();
});
$('.formBox .hide-form').click(function(){
$(".floatButton").show();
$(".formBox").hide();
});

あとはcssのアニメーションを使って、良いデザインにしてみたいと思います。
ありがとうございました

[TEKA-e1]

ありがとうございました！
どの様にすれば良いかがわかり、 jQueryを使っていたのでそちらで書いてみました。
<code>
$('.formBox').hide();
$('.floatButton img').click(function(){
$(".floatButton").hide(); //フロートボタンを非表示
$(".formBox").show();
});
$('.hide-button').click(function(){
$(".floatButton").hide();
$(".formBox").hide();
});
$('.formBox .hide-form').click(function(){
$(".floatButton").show();
$(".formBox").hide();
});
</code>
ありがとうございました。

[mikan_s4n]

ちなみにご承知の上かもしれませんが、cssのdisplay:noneとjQueryのHide()は異なるものです。
jQueryのHide()は内部的にvisibility:hidden;と同一であり、こちらは要素を見せないようにするだけで表示領域としては存在します。
一方、display:none;は表示領域自体を無いものとするため、隣や下に何かの要素があれば表示領域がズレ混みます。
分かりやすい記事があったのでついでに載せておきますので、こういった違いを意識的に利用すれば少ないコード記述で済む場合もありますよ
https://qiita.com/ma_me/items/a5249693c0b21836126b