<details>
    <summary>続きを読む</summary>
ここに隠したいことを書く
</details>

みんな大好き折りたたんで隠せる非常にシンプルなタグ。

CSS

summary {
  cursor: pointer;
  text-decoration: underline;
  list-style: none;
}

cursor: pointer;でカーソルをホバーさせると手に変化するとわかりやすい。アンダーラインを付けるとさらに、何か起こりそうな感じをかもせるかと。list-style: none;で▼を消したり。この辺はお好みで。

ボタン風に装飾してみる

/* 続きを読む*/
details {
max-width: 420px;
  border: 0px
}
summary {
	  display: inline-block;
	  cursor: pointer;
	  list-style: none;
	  margin:25px auto; padding: 5px;
	  background: #FBCC2F;
	  color: #242323;
	  font-size: 16px;
	  font-weight: bold;  
	  border-radius: 20px;
	  text-align:center;
}

summary:hover {　font-size: 18px; color: white; background: #F7F8E0; }

details {

max-width: で大きさを指定して　border: 0pxで枠線の太さ。

summary { display: inline-block; にするとブロック状になってボタン風に扱える

border-radius: ボタンの形をカスタマイズ。細かい指定はこっちを参照の事

summary:hover カーソルがホバーした時の指定。色が変わって字も大きくなる。

IEは未対応、畳むボタンもないけど問題ないと思われる。