閉じるボタンのソースコードで悩んでいます。

Question

前提・実現したいこと

ウェブサイト(スマホのみ)のフッターに表示させている広告という名のバナーを閉じるボタンを設置して閉じれるようにしたいと思っています。
設置に成功はしたのですが、閉じるボタン実装のソースコードが成功しなくて悩んでいます。
「閉じてる状態→開く」ではなく「開いている状態→閉じる」パターンです。

発生している問題・エラーメッセージ

思ったソースコードが書けなく迷走しています。

該当のソースコード

【HTML】
<footer>

<div id="footer">
<div class="top"><span class="topbtn">Close ></span><!--top--></div>
<div class="btm">
<ul class="btm"><li><a href="リンクURL" rel="nofollow" target="_blank"><img src="画像URL" alt="" border="0"/></a></li></ul>
<!--btm--></div>
<!--footer--></div>
<p><img src="<?php bloginfo('template_directory'); ?>/img/footer.gif" alt="TEST" /></p>
</footer>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(".top").click(function(){
  $(this).parent().fadeOut(2000);
});
</script>

【CSS】
footer #footer{
  width:100%;
  position:fixed;
  bottom:0px;
  display:block;left:0;
  z-index:1000; 
  background-color: #333; 
  color: white; 
  text-align: center; 
}
footer #footer ul{
  display:flex;
  list-style:outside none none;
  padding:0;margin:0;
}
footer #footer ul li img{
  width:100%;
}
footer p{
  margin:0; 
  background-color:#005426; 
  text-align: center; 
}

```

### 試したこと

調べたところ、
https://saruwakakun.com/html-css/reference/hidden-show
がよさそうで試してみましたが
これだと「閉じる」ボタンが残ってしまうので、、、
すべて完全に閉じるのが理想です。

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

Comments

[m.ts10806]

タグに「Java」とありますが、「PHP」「WordPress」のように見えます。しいてなら「JavaScript」ですかね。

[m.ts10806]

あ、参照先は「HTMLとCSSだけで」か。「JavaScript」は今のところ利用はしてないようですね（利用した方が楽のようにも思いますが）

[m.ts10806]

コード部分ですが、html、cssは分離してください。冒頭部分を ```html ```css　のように入れることでその言語に最適なハイライトがされます。

[tsunana]

やはり使用したほうが良さそうですか... タグについては後ほど修正しておきます。

[kszk311]

このままではソースが不十分のように見えます。回答者が、コピペして実現できるソースになっていると理想です。labelとかinputを使用すると思うのですが、ソース内にそれらがないですね。

[m.ts10806]

提示ソースにはfooterタグの開始部分がないので追記しておいてもらえると助かります。

[tsunana]

記入漏れ失礼しました。はやりコメントにもあります通り、label、inputを用いた記述に訂正したほうがよいでしょうか。

[tsunana]

更に追記すみません、HTMLの</body>まえにscriptを記述しましたら閉じるから消すことができました。ですが別ページへ行くと復活してしまいます、まだ何か足りないようです。。

[kszk311]

デフォルトで表示なら、別ページに線維した時に表示されるのは正しい動作だと思いますが…。閉じて別ページへ遷移したときは、閉じた状態を保持したいのですか？

[tsunana]

kszk311さん＞そのとおりです。ユーザーが広告を「閉じる」で消したあとでも、別のサイト内ページへ変遷した際も閉じた状態を保持したいです。

[m.ts10806]

閉じた状態を保持したいのであればjavascriptかサーバー側の言語で持っておく必要がありますね。

[tsunana]

コメントありがとうございます。想定の形ができましたが調べれば調べるほどscriptについて学ばないとなと思いました。

[m.ts10806]

Webサイトを構築して見栄えよくしたり色んな動きをつけたり　としたいときは必須の技術ですね。cssでアニメーションできるようにはなりましたが、やはり「イベント」絡みとなるとJavaScriptは必須です。

[tsunana]

まだ日が浅いのでざっくりお聞きしたいのですが、javascriptなどは条件に合うもののテンプレートをどこかから引っ張ってくる。のような認識でよかったでしょうか。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[tsunana]

すみません初回で手順把握できていませんでした、、解決済にさせていただきます。皆様アドバイスいただきありがとうございました。

[m.ts10806]

新しく別途質問立てられたほうが良いですね。もう少し要件を詰めてまずは調べて色々試してみてください。

Answer 1

ユーザーが広告を「閉じる」で消したあとでも、別のサイト内ページへ変遷した際も閉じた状態を保持したい

sessionStorageを使った方法ですが、こんな感じでいけるかと

if(sessionStorage.getItem("bnrHidden") == '1'){
	$(".top").parent().hide();
}else{
	$(".top").click(function(){
	  $(this).parent().fadeOut(2000, function(){
	  	sessionStorage.setItem('bnrHidden', '1');
	  });
	});
}

他にも、クッキー、localStrageとかありますが、何を元に判定したいのかは判断してもらえれば。

Comments

[tsunana]

記述してみたところ想定していた動作になりました！ありがとうございます。
sessionStorageを調べてみましたが、クライアント側にデータを保持する仕組みのひとつなのですね、、勉強になります。

Answer 2

参照先を見るに↓で消えるかと思います。

閉じるボタンのセレクタ:checked{display:none;}

input,label周りのHTMLがあればもっと詳しく書けると思いますが、とりあえず。