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