「もっと詳しく」をクリックすると、画面がパッと開きますが、

質問

例えば
http://www3.nhk.or.jp/news/t10013307761000.html
で、
「もっと詳しく」をクリックすると、画面がパッと開きますが、

これはどうやって作るんですか？

回答No.1

jein

レイヤーという、仮想的な画面の層を作り、それを制御することで可能です。
NHKのページではスタイルシートを使っていますが、Javascriptを使うシンプルな方法もあります。

クリックしたら開くだけなら以下のような記述でできます。

<script language="JavaScript">
<!--
function openLayer(){
document.getElementById("HideLayer").style.display = "";

}
-->
</script>
<a href="javascript:openLayer()">続きを読む</a>

<div id="HideLayer" style="display:none">
続きの内容
</div>

もう一度クリックすると閉じるようにするには、隠している部分が
表示されているのかどうかを検出させるためのスクリプトを追加する必要があります。

詳しく知りたいならばHTMLやCSSを扱うサイトや書籍で「レイヤー」操作について調べてください。