.NET開発者のためのブログメディア

SE: jQueryでのslideToggleの使い方について教えてください。

PM: 分かりました。jQueryでのslideToggleの使い方とほかのtoggle系関数との違いについても解説しましょう。

jQueryでのslideToggleの使い方とは？

今回は、jQueryでのslideToggleの使い方について説明します。slideToggleを使うと、要素の表示/非表示を切り替えられます。スピードやコールバック関数も指定可能です。ほかのtoggle系関数との違いについても紹介します。

jQueryでのslideToggleの使い方に興味のある方はぜひご覧ください。

基本的な使い方

slideToggleの基本的な使い方を紹介します。
実際のソースコードを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
  </head>
  <body>
    <button>slideToggle</button>
    <p>
      This is jQuery slideToggle() sample.<br>
      This is jQuery slideToggle() sample.<br>
      This is jQuery slideToggle() sample.
    </p>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button>slideToggle</button>

<p>

This is jQuery slideToggle() sample.<br>

This is jQuery slideToggle() sample.

</p>

</body>

</html>

jQueryは以下のように記述します。

$(function(){
  $("button").click(function () {
    $("p").slideToggle();
  });
});

$(function(){

$("button").click(function () {

$("p").slideToggle();

});

実行結果は以下のようになります。ボタンをクリックすると、p要素の表示/非表示が切り替わることが分かります。

See the Pen
jQuery_slideToggle1 by kskumd (@kskumd)
on CodePen.

スピード

slideToggleのスピードを変更する方法を紹介します。引数に数字を指定したり、slow/normal/fastなどを指定できます。実際のソースコードを見てみましょう。

<div>
  <button id="btn1">slideToggle(1000)</button>
  <p>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.
  </p>
</div>

<div>
  <button id="btn2">slideToggle(normal)</button>
  <p>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.
  </p>
</div>

<div>
  <button id="btn3">slideToggle(fast)</button>
  <p>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.
  </p>
</div>

<div>

<button id="btn1">slideToggle(1000)</button>

<p>

This is jQuery slideToggle() sample.<br>

This is jQuery slideToggle() sample.

</p>

</div>

<div>

<button id="btn2">slideToggle(normal)</button>

<p>

This is jQuery slideToggle() sample.<br>

This is jQuery slideToggle() sample.

</p>

</div>

<div>

<button id="btn3">slideToggle(fast)</button>

<p>

This is jQuery slideToggle() sample.<br>

This is jQuery slideToggle() sample.

</p>

</div>

jQueryは以下のように記述します。

$(function(){
  $("#btn1").click(function () {
    $('#btn1+p').slideToggle(1000);
  });

  $("#btn2").click(function () {
    $('#btn2+p').slideToggle('normal');
  });

  $("#btn3").click(function () {
    $('#btn3+p').slideToggle('fast');
  });
});

$(function(){

$("#btn1").click(function () {

$('#btn1+p').slideToggle(1000);

});

$("#btn2").click(function () {

$('#btn2+p').slideToggle('normal');

});

$("#btn3").click(function () {

$('#btn3+p').slideToggle('fast');

});

実行結果は以下のようになります。表示/非表示の切り替えスピードの違いが分かるのではないでしょうか。

See the Pen
jQuery_slideToggle2 by kskumd (@kskumd)
on CodePen.

コールバック

コールバック関数を指定する方法を紹介します。slideToggle完了後のロジックを記述できます。実際のソースコードを見てみましょう。

<button>slideToggle</button>
<p>
  This is jQuery slideToggle() sample.<br>
  This is jQuery slideToggle() sample.<br>
  This is jQuery slideToggle() sample.
</p>
<div class = "log"></div>

<button>slideToggle</button>

<p>

This is jQuery slideToggle() sample.<br>

This is jQuery slideToggle() sample.

</p>

jQueryは以下のように記述します。

$(function(){
  $("button").click(function () {
    $("p").slideToggle( 'slow', function(){
      $(".log").text('slideToggle() Complete');
    });
  });
});

$(function(){

$("button").click(function () {

$("p").slideToggle( 'slow', function(){

$(".log").text('slideToggle() Complete');

});

実行結果は以下のようになります。slideToggle完了後にメッセージが表示されることが分かります。

See the Pen
jQuery_slideToggle3 by kskumd (@kskumd)
on CodePen.

他のtoggle系

他のtoggle系関数（toggle/fadeToggle）を紹介します。実際のソースコードを見てみましょう。

<div>
  <button id="btn1">slideToggle</button>
  <p>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.<br>
    This is jQuery slideToggle() sample.
  </p>
</div>

<div>
  <button id="btn2">toggle</button>
  <p>
    This is jQuery toggle() sample.<br>
    This is jQuery toggle() sample.<br>
    This is jQuery toggle() sample.
  </p>
</div>

<div>
  <button id="btn3">fadeToggle</button>
  <p>
    This is jQuery fadeToggle() sample.<br>
    This is jQuery fadeToggle() sample.<br>
    This is jQuery fadeToggle() sample.
  </p>
</div>

<div>

<button id="btn1">slideToggle</button>

<p>

This is jQuery slideToggle() sample.<br>

This is jQuery slideToggle() sample.

</p>

</div>

<div>

<button id="btn2">toggle</button>

<p>

This is jQuery toggle() sample.<br>

This is jQuery toggle() sample.

</p>

</div>

<div>

<button id="btn3">fadeToggle</button>

<p>

This is jQuery fadeToggle() sample.<br>

This is jQuery fadeToggle() sample.

</p>

</div>

jQueryは以下のように記述します。

$(function(){
  $("#btn1").click(function () {
    $('#btn1+p').slideToggle();
  });

  $("#btn2").click(function () {
    $('#btn2+p').toggle();
  });

  $("#btn3").click(function () {
    $('#btn3+p').fadeToggle();
  });
});

$(function(){

$("#btn1").click(function () {

$('#btn1+p').slideToggle();

});

$("#btn2").click(function () {

$('#btn2+p').toggle();

});

$("#btn3").click(function () {

$('#btn3+p').fadeToggle();

});

実行結果は以下のようになります。表示/非表示の違いが分かるのではないでしょうか。

See the Pen
jQuery_slideToggle4 by kskumd (@kskumd)
on CodePen.

SE: jQueryでのslideToggleの使い方がよく分かりました。

PM: jQueryでslideToggleを使うと要素の表示/非表示を切り替えられたり、スピードやコールバック関数も指定できます。ご紹介した方法を参考にしてご自身でソースコードを書いて理解を深めてください。

まとめ

いかがでしたでしょうか。jQueryでのslideToggleの使い方について説明しました。slideToggleを使うと、要素の表示/非表示を切り替えられます。スピードやコールバック関数も指定可能です。また、ほかのtoggle系関数との違いについても紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

公開:'20/03/17 更新:'21/11/05
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

公開:'20/03/16 更新:'21/11/08
【.NETが統合】.NET 5の概要と今後のリリース予定

公開:'20/03/05 更新:'20/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

jQueryでのslideToggleの使い方とは？ほかのtoggle系関数との違いについても紹介！

jQueryでのslideToggleの使い方とは？

基本的な使い方

スピード

コールバック

他のtoggle系

まとめ

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務