スタッフ紹介ページをJqueryで作りたいのですが

質問

このたび店舗のスタッフ紹介のページを変えたいなと思い、色々なページを見ていたら、ホームページ制作会社のスタッフ紹介のページが目に止まりました。

⇒ http://liginc.co.jp/member/

スタッフさんの顔画像をクリックすると詳細が下に表示されるとか
スッキリしていて是非にと思うのですが、どの様なスクリプト？
を使用しているのかアドバイスをいただけると嬉しいです。

どなたか、アドバイスを宜しくお願いします m( . . )m

回答No.1

ONEONE

1) clickイベントを設定

2) 要素を取得
方法1) ajax
ご紹介のサイトではajaxを使って各プロフィールを動的に取得しています。
http://blog.toshimaru.net/jquery-ajaxdeferredajax/

方法2) 非表示要素
プロフィールが少なければ、初期では非表示としておき
必要に応じて制御すればよいでしょう。

3) アコーディオン
ｊQueryのslideUp(), slideDown(), slideToggle()か
jQuery UI の accordion()で要素を表示させます。
非表示要素にslideDown()すればにょきっと出てきます。
http://semooh.jp/jquery/api/effects/slideUp/%5Bspeed%5D,+%5Bcallback%5D/
http://js.studio-kingdom.com/jqueryui/widgets/accordion

4) 三角
表示したらCSSで三角を描画し吹き出し風にしています。
http://js.studio-kingdom.com/jqueryui/widgets/accordion

5) 閉じる
ajaxで取得した場合は　3)のアコーディオンで閉じた後に
remove()かempty()で要素を消します。