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

jQuery

公開日時: 2021-10-08

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

この記事でわかること

システム エンジニア: jQueryでのslideToggleの使い方について教えてください。

プロジェクト マネージャー: 分かりました。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.

システム エンジニア: jQueryでのslideToggleの使い方がよく分かりました。

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

まとめ

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

jQueryでのslideToggleの使い方とは？

基本的な使い方

スピード

コールバック

他のtoggle系

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

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

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

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

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

jQueryでのslideToggleの使い方とは？

基本的な使い方

スピード

コールバック

他のtoggle系

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

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

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

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts