IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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