IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

slideToggle() - たった1行でできる表示/非表示の切り替え | jQuery Introduction

Photo by Caleb Woods on Unsplash

Photo by Caleb Woods on Unsplash

 

 

jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best

slideToggle()

slideToggle()メソッドはHTML要素の表示/非表示を切り替える時に使います。1行だけで表示/非表示を切り替えることができるのでとても便利です。

 

$("tag.classname").slideToggle();

 

DEMO

sample1
  • list1 
    • list1-1
    • list1-2

 

$(".sample1 ul.list2").slideToggle();

 

sample2

素早い(0.3s)

  • list1 
    • list1-1
    • list1-2

遅い(2.0s)

  • list1 
    • list1-1
    • list1-2

 

//素早い(0.3s)
$(".sample2a ul.list2").slideToggle(300);
//遅い(2.0s)
$(".sample2b ul.list2").slideToggle(2000);

 

sample3

表示/非表示切り替え後の処理

  • list1 
    • list1-1
    • list1-2

 

$(".sample3 ul.list2").slideToggle(1000,function(){
    $(".sample3 span.toggle").toggleClass("down");
});

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slideToggle</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<div class="sample1">
<ul class="list1">
<li>list1 <span class="toggle"></span>
<ul class="list2">
<li>list1-1</li>
<li>list1-2</li>
</ul>
</li>
</ul>
</div>
<script>
$(".sample1 span.toggle").on("click", function (e) {
$(".sample1 ul.list2").slideToggle();
})
</script>

<div class="sample2a">
<ul class="list1">
<li>list1 <span class="toggle"></span>
<ul class="list2">
<li>list1-1</li>
<li>list1-2</li>
</ul>
</li>
</ul>
</div>
<script>
$(".sample2a span.toggle").on("click", function (e) {
$(".sample2a ul.list2").slideToggle(300);
})
</script>
<div class="sample2b">
<ul class="list1">
<li>list1 <span class="toggle"></span>
<ul class="list2">
<li>list1-1</li>
<li>list1-2</li>
</ul>
</li>
</ul>
</div>
<script>
$(".sample2b span.toggle").on("click", function (e) {
$(".sample2b ul.list2").slideToggle(2000);
})
</script>

<div class="sample3">
<ul class="list1">
<li>list1 <span class="toggle"></span>
<ul class="list2">
<li>list1-1</li>
<li>list1-2</li>
</ul>
</li>
</ul>
</div>
<script>
$(".sample3 span.toggle").on("click", function (e) {
$(".sample3 ul.list2").slideToggle(1000,function () {
$(".sample3 span.toggle").toggleClass("down");
});
})
</script>


<style>
ul .toggle {
background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190814/20190814161708.png');
background-size: cover;
width: 20px;
height: 20px;
margin: 0px 0 -5px 0;
display: inline-block;
cursor: pointer;
transform: rotate(180deg);
transition: all .3s;
-webkit-transition: all .3s;
}
ul .toggle.down {
transform: rotate(0deg);
transition: all .3s;
-webkit-transition: all .3s;
}
</style>

</body>
</html>

 

 

公式Document
.slideToggle() | jQuery API Documentation