2024年06月14日

jquery：slideToggle()

このメソッドの説明

slideToggle() はjQueryメソッドです。

要素を上から下に開き、下から上に閉じます（メニュの開閉によく使われます）

メモ

slideToggle()は、toggle()の blind効果と同じ動きになります。

メソッド

セレクタ.slideToggle( duration , complete )

パラメータ

duration　(整数 | 指定パラメータ)（省略可）

開閉の実行時間

初期値：400ms

数値で指定する以外に下記の文字列でも可

・'slow' :600ms

・'normal':400ms

・'fast' :200ms

complete　(関数)（省略可）

開閉の終了後に実行する関数

事例

①パラメータを何も指定しないスライドトグル

下記のボタンを挿入して下さい。開閉時間は400msです.

エフェクトエリア
ここが表示/非表示します

上記のプログラムは下記から構成されています。

<p><button class='toggle01' style='padding:5px 10px;background:cyan'>スライドトグルによる開閉</button></p>
<div class='toggle_target01' style='width:200px; height:100px;background:pink;'>
	<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
	$(function(){
		$('.toggle01').parent().next().css('display','none');
		$('.toggle01').click(function(){
			$(this).parent().next().slideToggle();
		});
	});
</script>

■1～4行目：HTML

■ボタンがクリックされたら、ボタンの親の次の要素をスライドトグルで開閉しています。

②duration と complete を指定したスライドトグル

下記のボタンを挿入して下さい。

トグル後に、ボタンのテキストを変更します。

エフェクトエリア
ここが表示/非表示します

上記のプログラムは下記から構成されています。

<p><button class='toggle02' style='padding:5px 10px;background:cyan'>開く▼</button></P>
<div class='toggle_target02' style='width:200px; height:100px;background:pink;'>
	<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
	$(function(){
		$('.toggle_target02').css('display','none');
		$('.toggle02').click(function(){
			$('.toggle_target02').slideToggle(1000,function(){
				var flg = $('.toggle_target02').css('display');
				if(flg == 'block'){$('.toggle02').text('コンテンツを閉じる▲');}
				else{$('.toggle02').text('開く▼');}
			});
		});
	});
</script>

■9～13行目

実行時間を1秒にし、トグルが完了して時に関数を実行し、コンテンツの表示/非表示に合わせてボタンの文字を変更しています。