【jQuery】slideToggleクリックで中身を表示する方法

クリックすると、中身がスライドで表示されるコードを紹介します。

使うのは、slideToggle()メソッド。

基本型

こうすることで、ページを開いたときに、スライドでフェードアウトします。

時間調整

とすると、1秒かけてスライドでフェードアウトします。数字の代わりに、slowとすれば0.6秒、normalが0.4秒、fastが0.2秒でスライドします。

実際の使い方

実際に使うときは、クリックするとスライドで表示されるようにする実装が多いと思います。以下のようにすることで、クリックすれば、中のコンテンツがスライドでフェードインします。

See the Pen
Untitled by awakoji (@awakoji)
on CodePen.

$(‘.btn-content’).hide();で、先にコンテンツを消しておく必要があります。

さらに、$(this).toggleClass(“open”);でopenというクラスをつけることで、ボタンの模様を変化させることができます。

応用

もしコンテンツの量が多い場合、コンテンツの中に『閉じる』ボタンを作っておいた方がいいですね。

See the Pen
Untitled by awakoji (@awakoji)
on CodePen.

$(“.btn”).removeClass(“open”);を使って、閉じるボタンを押すと、openクラスが消えるようにしましょう。
以上になります。