jqueryでクリックしたら表示 もう一度クリックまたはほかのところを非表示にする方法

Question

fa-envelopeをクリックしたらsearchを表示しもう一度クリックまたはほかのところをクリックしたら非表示にする方法を知りたいです。
調べてはみましたが内容が複雑なものが多く理解できませんでした。

<div class="header-right">
					
						
					<i class="fas fa-search"></i>
							
				
					<a href=""><i class="far fa-envelope"></i></a>
					
					
        				<input type="checkbox" id="menu-btn-check">
        				<label for="menu-btn-check" class="menu-btn"><span></span></label>
    			
						
					
				
							
			</div>
			<div class="search"><?php get_search_form(); ?></div>

jQuery('.fa-search').on('click', function() {
	jQuery(".search").show();
  });

Answer 1

何を見て理解できなかったのか不明ですが、
下記は理解できますか。

$(document).click(function (event) {
    let target = $(event.target);
    if ($(".search").is(':visible')) {
        $(".search").hide();
    } else {
        if (target.hasClass("fa-search")) {
            $(".search").show();
        }
    }
});

CodePenサンプル

Comments

[kenta-wata]

そのコードを使用しましたが、.search自体が開かなくなりました

[hatena19]

こちらで作成したサンプルでは動作してます。
回答にサンプルリンクを追加したので確認ください。

[kenta-wata]

できないです。。
<div class="search"><?php get_search_form(); ?></div>
phpでsearchform.phpを呼び出しているのが原因ですか？

[hatena19]

たぶん、関係ないと思いますが、searchform.php でどのようなHTMLが出力されてますか。

回答のサンプルではできていますよね。

[kenta-wata]

以下のように書いています。
サンプルでは機能しています

--searchform.php--
<form method="get" action="<?php echo home_url('/'); ?>" >
<input name="s" type="text" placeholder="サイト内を検索">
----

---css--
.search{
display: none;
}
----

[kenta-wata]

jQuery(function () {
$('.fa-search').click(function () {
$('.search').toggle();
});
});

上記の内容にしたらうまくいきました！！ありがとうございます！