CSSとHTMLだけで要素が見え隠れ！

2021年2月13日

なが～いコード表示で、なが～い記事になっちゃう
自分のためのブログだけど、見た目いいほうがいいです
アラセブ！ここまで来たら欲が出るし脳トレにちょうどいい

参考にさせていただいたのは今回もサルワカさんの
「HTMLとCSSだけ！要素の表示・非表示を切り替える方法」です

コード表示で悪戦苦闘しているときに見て「これいい！」と思ってメモしといた

実際に使ってみた感想「クリックして表示」ボタンが要素が表示されてもそのままなので
出来れば「クリックして非表示」に変わるといいな

ってことで次に見つけたのが、みったにブログさんの
開閉ボタンで表示・非表示をHTMLとCSSで作る方法を参考に少し弄ってみた
「READ MORE」と「CLOSE]ボタンがついてて非表示部分にグラデーションがかかってて
少しだけ内容が見えてるタイプだけど、素人には難しそうです

「toc_box」を「hidden_box」に変更して不要な部分を削除して
必要な↓↓の部分をボタンの位置などを調整して入れてみた

.toc_box input:checked ~ label:after {
content: ‘CLOSE’;

「READMORE」と「CLOSE」をそれぞれ「クリックして表示/非表示」に変更、

上手い考えと思ったけど、みったにさんのは閉じる時のボタンが要素の下に移動してしまう

これだと長いコードを表示したときなどは結局下までスクロールして閉じることになる

拙いスキルでボタンの位置を移動しないようにしてみたけど、要素がはみ出して使い物にならない

アラセブの手習い、
かあしゃん、いつになくガンバっております
google先生にかぶりつき、コーヒーがぶ飲み
さて、どうなることやらです

見つけました～～～＼＼( ⌒▽⌒ )／／

第０版さんのコピペで出来る、クリックで要素の表示非表示を切り替えるHTML＆CSS【WordPress対応版】

ごあいさつ

できたみたいです
「第０版」さん、ありがとうございます

こんなに理想的な形で提供してくれるなんて（感謝！！）

自己満足だけど目の付け所は間違っていなかったみたいです
サルワカさんのコードを基本に第０版さんのコードを組み合わせて実装、記録を残します

HTML


<div class="hidden_box"><input id="label1" type="checkbox" />
<label for="label1">ラベル</label>
<div class="hidden_show">
ここに非表示にしたい部分
    </div>
</div>

同じページ内に複数設置する場合は「label1」の数字を変えて使用です

CSS

.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
	margin: 0 auto;
	padding: 10px;
	font-weight: bold;
	border: 1px solid #696969;
	border-radius: 5px;
	cursor: pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
	background: #efefef;
}

.hidden_box label:after {
	content: "を表示";  /* 閉じているとき */
}

.hidden_box input {
	display: none;
}

.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    text-align: left;
    transition: 0.5s;
}

.hidden_box input:checked ~ label:after {
	content: "を非表示";	/* 開いているとき */
}

.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

結局、ずいぶんと長いページになったしまったけど満足

ラベル

ここに非表示にしたい部分

サルワカさん、みったにさん、第０版さん、ありがとうございましたm(_ _)m

お次はアコーディオンメニューかな？