CSSは使わずにできます。
ちなみに、私の方法では、表示はできますが、表示非表示切り替えはできませんのであしからず。
表示非表示をしたい方はcheckboxを使えばできるらしいですよ。
ちなみにこんな感じになります。
・・・
っでは実装方法です。
ただし、どうもはてなブログの場合は、Markdown記法でないとうまく動作しないようです。（2019年10月現在）
新記事作成画面を開いて、左上の編集を「見たまま」から「Markdown」に変更します。
※私は、Markdownには慣れていないため、ボタンの箇所以外を見たまま編集で作成し、そのhtmlをMarkdownに貼り付けるという方法でやってます。
次に記事に以下のように書きます。
<input type="button" value="ボタンに表示する文章" onclick="document.getElementById('xxxx001').style.display = 'block';">
<p id="xxxx001" style="display: none;">表示したい文章（とか画像）</p>
ボタンに表示する文章、xxxx001（ボタン番号みたいなもん）の部分はお好きなように変更してください。
これだけ！
超簡単やん・・・
少し説明すると
<p id="xxxx001" style="display: none;">表示したい文章（とか画像）</p>
このstyle=”display: none;”で最初は文章を見えなくしておきます。
<input type="button" value="ボタンに表示する文章" onclick="document.getElementById('xxxx001').style.display = 'block';">
ボタンを作成 → ボタンが押されたときにidがxxxx001の本文を見えるようにします。
ちなみに、２つ以上のボタンを作る場合はidをxxxx002のように変更してください。
じゃないと、ボタンひとつ押したときに、全部表示されちゃう。
以上です。
コメント
ボタンをたくさん押せて、楽しい記事でした！
母ちゃん！
ありがとうござます。
ぜひご活用ください！