用途
新着
履歴
分類

HTML コンテンツの表示・非表示

HTML コンテンツの表示・非表示
HTML5から追加されたタグでJavaScriptを使わないでコンテンツの表示・非表示を実装するサンプルです。

クリックすると隠れている要素を表示させるJSはよく実装します。

よくアコーディオンと呼ばれるUIですが、HTMLだけでも表現することが可能です。

なにも装飾せずにコードを書くと以下のようになります。

ここをクリックすると下に要素が表示されます
この部分は予め記述されたコンテンツです
JavaScriptは使用していません
もう一度クリックすると閉じます
<details>
<summary>ここをクリックすると下に要素が表示されます</summary>
<div>
この部分は予め記述されたコンテンツです<br>
JavaScriptは使用していません<br>
もう一度クリックすると閉じます<br>
</div>
</details>

いわゆるアコーディオンのUIと比べるとアニメーションがないので素っ気ない感じがしますが、ブラウザに依存するので、今後アップデートがあるかもしれません。

ちょっとスタイルをつけてみたのが以下になります。

ここをクリックすると下に要素が表示されます
この部分は予め記述されたコンテンツです
JavaScriptは使用していません
もう一度クリックすると閉じます

んー、いまいち装飾しづらいですが、簡易的にすますにはよいと思います。

また、自論ですが、スタイルで明示的に非表示にしてないので、SEOとして悪く評価されない可能性があります。

公開 2020-03-10 07:10:08
更新 2022-01-31 01:50:56
このページの二次元コード
HTML コンテンツの表示・非表示

人気のサンプル

search -  category -  about
© 2024 kipure
Top