jq之slideToggle-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq之demo</title>
    <!--线上jq库-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                /*滑下/收起切换*/
                $("#panel").slideToggle("slow");
            });
        });
    </script>
    <style type="text/css">
        #flip,#panel
        {
            padding: 5px;
            text-align: center;
            background-color: aqua;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding: 50px;
        }
    </style>
</head>
<body>
<div id="flip">收起/滑下切换</div>
<div id="panel">Hi</div>
</html>