クリックすると隠れている要素を表示させるJSはよく実装します。
よくアコーディオンと呼ばれるUIですが、HTMLだけでも表現することが可能です。
なにも装飾せずにコードを書くと以下のようになります。
ここをクリックすると下に要素が表示されます
この部分は予め記述されたコンテンツです
JavaScriptは使用していません
もう一度クリックすると閉じます
JavaScriptは使用していません
もう一度クリックすると閉じます
<details>
<summary>ここをクリックすると下に要素が表示されます</summary>
<div>
この部分は予め記述されたコンテンツです<br>
JavaScriptは使用していません<br>
もう一度クリックすると閉じます<br>
</div>
</details>いわゆるアコーディオンのUIと比べるとアニメーションがないので素っ気ない感じがしますが、ブラウザに依存するので、今後アップデートがあるかもしれません。
ちょっとスタイルをつけてみたのが以下になります。
ここをクリックすると下に要素が表示されます
この部分は予め記述されたコンテンツです
JavaScriptは使用していません
もう一度クリックすると閉じます
JavaScriptは使用していません
もう一度クリックすると閉じます
んー、いまいち装飾しづらいですが、簡易的にすますにはよいと思います。
また、自論ですが、スタイルで明示的に非表示にしてないので、SEOとして悪く評価されない可能性があります。
