Studencheskie Programmisty

CSS3 の target 疑似クラスで脚注を動的に表示する - lucky bagを見て、さんざん既出かもしれないけど、よく長い説明とかネタバレとかを隠すのに使われる、クリックで「表示」と「非表示」をトグルするのをCSSだけで実現できるんじゃないかと思って実験してみた（1文長い..)

結果から言うと、次のような感じでできた。

隠されている文章を表示

現金自動預け払い機（げんきん じどう あずけばらいき／ATM, Automated Teller Machine） は、通常、紙幣（及び硬貨）、通帳、磁気カード等の受入口、支払口を備え、金融機関や貸金業者、現金出納を行う業者の提供するサービスが、顧客自身の操作によって取引できる機械を指す。
元々は都市銀行の店舗に設置され、普通預貯金の預け払いに用いられ出したが、今日、金融機関はもとより、小売店や公共施設などに幅広く設置されている。
また、普通預金以外の取引や現金を介さない取引も広く取り扱うよう進化しており、自動取引装置、自動窓口機などとも呼ばれる。（Wikipediaより） 隠す

<style type="text/css">
#hide-atm{
   display: none;
}
#hide-atm:target{
   display: block;
}
</style>
<a href="#hide-atm" id="title-atm" name="title-atm">隠されている文章を表示</a>
<p id="hide-atm">
現金自動預け払い機（げんきん じどう あずけばらいき／ATM, Automated Teller Machine） は、通常、紙幣（及び硬貨）、通帳、磁気カード等の受入口、支払口を備え、金融機関や貸金業者、現金出納を行う業者の提供するサービスが、顧客自身の操作によって取引できる機械を指す。<br />元々は都市銀行の店舗に設置され、普通預貯金の預け払いに用いられ出したが、今日、金融機関はもとより、小売店や公共施設などに幅広く設置されている。<br />また、普通預金以外の取引や現金を介さない取引も広く取り扱うよう進化しており、自動取引装置、自動窓口機などとも呼ばれる。（Wikipediaより）
<a href="#title-atm">隠す</a>
</p>

hide-atm の要素がターゲットされると display:block で表示されるようになり、ターゲットが外されると再び display:none の状態に戻って隠される、というわけ。id名がアレなのはスルーして下さいｗ

１つ１つにidをふらなきゃいけないのが欠点といえば欠点だが、例えばCSSを

[id^="hide-"]{
   display: none;
}
[id^="hide-"]:target{
   display: block;
}

みたいにすれば、id名の先頭が hide- のものは自動的に開閉するようになるから、そんなに面倒というわけでもないかもしれない。

target疑似クラスが実装されていないのは IEのみ（IE8含む）、E[attr^=val] が実装されていないのは最新版ではOpera10だけで、IE8でも実装されている。 というわけで、IEを切ってもいいのであれば使える技かもしれない（その決断をするのが難しいんだけど）。