CSS3にあるtarget疑似クラスをつかって表示をオン・オフすることができるんだよ。それはすごい！というような内容の話。target疑似クラスとはアンカーのあるリンクを特定する方法で、たとえば「#test:target」というCSSは、URLが「/blog//index/#test」の場合にのみ作用します。言い換えると、「test」というリンクをクリックしたあとのページで作用するようなCSSになります。
実際にトラックバック欄で試してみました。下記のCSSを追加しました。
1 | #trackbacks:target #trackbacks-open-content {display:block !important;} |
このサイト（メモログ）では、トラックバック入力欄は通常非表示の状態になっていますが、記事タイトル下側にある「トラックバック(0)」というリンクをクリックした場合は、トラックバック入力欄が表示されます。!importantがついているのは、prototype.jsを利用した項目の開閉をするのにインラインにdisplay:none;が入っているため。display:noneをスタイルシート上で指定していれば、!imortantは必要ありません。
CSS3 . Infoによると、target疑似クラスはすべての「current browser」でサポートしているとのこと。実際にFirefox 2.0とsafari 3（mac）で試してみましたが、きちんと動作していました。
:target を利用して表示したコンテンツをふたたび元の状態（非表示）にしたい場合は、たとえばvoidみたいに、ターゲットを外すことで可能です。とはいえトリッキーな感じ。Vitaminで紹介しているように、常に何かを表示させておくような、タブ型のコンテンツを作るときのほうがスマートに利用できます。
応用として考えられるのは、たとえばQ&Aのページとか、操作手順のページとか。ページとしては1ページでほしいけれど、ユーザーに明示的にクリックすることでコンテンツを表示したいとか、1ページ内でコンテンツの流れ・動線を作りたい場合。Javascriptでもできますけど、こちらの方がつくるのは楽だと思います。IE6のシェアが下がらないとなかなか実践での利用というのは難しいかもしれませんが、あと1、2年もすれば、表示開閉のためのスタンダードな方法になるのではないかと推察する次第です。