jQuery:toggleClassのちょい技でコードをコンパクトに

以下のようなコードを書きそうになって、もっと簡単に書けなかったっけ?ってなったのでメモしておきます。

//これが…..

if(条件){
$hoge.addClass('active');
}else{
$hoge.removeClass('active');
}

//こうじゃ!.....
$hoge.toggleClass('active',条件);

5行が1行に!
以上になります。

CSSだけでシンプルなツリー状のメニューを作る for IE8+

調べてみるとIE9以上でしか動かないものがほとんどでしたが、今回IE8でも動くものを作成しました。
IE9やjQueryでスタイリングしなければならない理由はCSSのlast-childが使えないことによるものです。

このデモではlast-childを使わずツリーを表現することにチャレンジしました。

デモ:CSSだけでツリーのスタイル

縦の線はulタグの:beforeで、横の線はliタグの:beforeで表現しています。
サブメニュー開閉の動きはjQueryを使っていますが、スタイリングはCSSのみです。

以上参考になれば幸いです。

amazonモバイルサイトの「レビュー全文を読む」の動きを作ってみる

本家と全く同じやり方ではないですが、こういうやり方もあるかな、というところを書いておきます。
ポイントは「レビュー全文を読む」をクリックすると改行されてレビューが読みやすくなるというところでしょう。

まず文章内のbrタグをdisplay:noneで削除して、改行を詰めておき「レビュー全文を読む」をクリックした時に、brタグにdisplay:blockをあてて改行を戻します。
具体的には以下のサンプルを御覧ください。

サンプルはこちら

ちなみに本家ではbrタグのある展開した時用の文章とbrタグのない省略用の文章の両方が用意されているようです。