jqueryで要素からclassを削除するremoveCss

jqueryを使って要素からclassを削除するremoveClassについて自分用メモ。（他にも、逆にclassを追加するaddClassというのもある）

しかし、やれることは分かっても、実際にどういうケースで使ったりするのか、あまり具体的にイメージできなかったので「身についた」とは感じていなかった。今回たまたま、あぁ、こういうときにも使えるなと気づいたので、それと一緒にここにメモ。

左図のように、ページアクセス時には最上部の一段だけ画像サムネール等の内容を表示しておき、どこかをクリックすると残りの全ての内容物を表示するというもの。

このサンプルでは、とりあえず一番上の見出しh3要素をクリックするすることで結果が得られるようにしてあるけれど、aやimg等をクリックする、とかでも勿論オーケー。

イベント発生前（クリックする前）は、CSSで決めたサイズ（この場合は高さ）ぶんだけ表示するようにしておき、イベントが発生したときにjqueryのremoveCssを使って、表示領域を限定しているclassを削除する。

見える部分を制限していたclassを削除することで、実際に内包している内容物全てが見えるようにするということ。

クリックするたびに表示、非表示を繰り返すのだとtoggleとかを使えばいいのだけど、今回はその必要はないケースだったのでこの「classを削除する」removeCssを使ってみた。（同じような結果を得るには、他にもたくさん考えられる）

CSS
（hideというclassによって、イベント発生前にユーザに見えている部分を制限）

#appear{
	width: 200px;
	background-color: #333;
	color: #fff;
	margin: 0;
	text-align: center;
}
.box{
	width: 200px;
	background-color: #eee;

}
.hide{
	height: 1.2em;
	overflow: hidden;
}
.box ul{
	margin: 0;
}

JavaScript

$(document).ready(function(){
    $("h3#appear").click(function(){ // このid名appearのh3をクリックすると
        $("div").removeClass("hide"); // hideというclassが付与されているdiv要素からhideが削除される
        });
});

実行サンプル