More than 3 years have passed since last update.

アコーディオンの速度を統一する

Posted at 2019-11-06

index.html

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="./index.css">
    </head>
    <body>

        <div class="a">
            <button type="button" class="toggle button">aaa</button>
            <div class="area">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
        </div>
        <div class="a">
            <button type="button" class="toggle button">aaa</button>
            <div class="area">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
        </div>
        <div class="a">
            <button type="button" class="toggle button">aaa</button>
            <div class="area">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            $(function() {
                var select = document.getElementsByClassName("area");
                var button = document.getElementsByClassName("button");
                var height = [];
                var dur = [];

                for(var i = 0; i < select.length; i++) {
                    console.log(select[i]);
                    height[i] = $(select[i]).height();
                    dur[i] = height[i] / 0.1; /*0.1は任意の速度*/
                    $(select[i]).css({display: "none"})
                    $(button[i]).addClass("button" + i);
                };

                var toggleFunction = function(button, index){
                    $(button).click(function() {
                        $(this).next().slideToggle(dur[index]);
                    });
                };

                toggleFunction(".button0", 0);
                toggleFunction(".button1", 1);
                toggleFunction(".button2", 2);



            });









        </script>
    </body>
</html>

index.css

.a {
    width: 100px;
    display: block;
}
.a > button {
    width: 100%;
}
.a > .area {
    width: 100%;
    word-break: break-all;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up