slideToggle()

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

slideToggle()
- DEMO
  - sample1
  - sample2
  - sample3
- 例

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

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

$("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