javascript - 如何使用javascript将Toggle down div更改为右左幻灯片

Question

嗨，我有 2 个 div，一个被命名为基本，另一个被命名为高级。 然后我有按钮显示高级。 当我单击“显示高级”按钮时，它会向下切换。但我希望它从右向左滑动。

这里是html

<div class="container" id="divBasic">Basic data</div>

<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>

    <a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Show Advanced ></a>

这里是js

                                            function toggle_basic(source) {

                                                var div = $("#divBasic");
                                                var top_btn = $("#divButtons");

                                                div.toggle();
                                                top_btn.toggle();
                                                $("#divShapes").toggle();

                                                if (source == "shapes") {
                                                    storeValue("Basic", "none");
                                                } else {
                                                    storeValue("Basic", "block");
                                                }

                                            }



                                            function toggle_advanced(hp) {

                                                var divAdvanced = $("#divAdvanced");

                                                divAdvanced.toggle();


                                                if (hp.outerText != "Show Advanced") {
                                                    storeValue("Advanced", "none");
                                                    //top_btn.css("height", "30px");
                                                    hp.innerText = "Show Advanced";
                                                } else {
                                                    storeValue("Advanced", "block");
                                                    //top_btn.css("height", "0px");
                                                    hp.innerText = "Hide Advanced";
                                                }
                                            }

请帮助我从右向左滑动时获得高级 div

谢谢

Answer 1

function toggle_basic(source) {

    var div = $("#divBasic");
    var top_btn = $("#divButtons");

    div.toggle();
    top_btn.toggle();
    $("#divShapes").toggle();

    if (source == "shapes") {
        storeValue("Basic", "none");
    } else {
        storeValue("Basic", "block");
    }

}



function toggle_advanced(hp) {

    var divAdvanced = $("#divAdvanced");

    divAdvanced.toggle("slide");


    if (hp.outerText != "Show Advanced") {
        //storeValue("Advanced", "none");
        //top_btn.css("height", "30px");
        hp.innerText = "Show Advanced";
    } else {
        //storeValue("Advanced", "block");
        //top_btn.css("height", "0px");
        hp.innerText = "Hide Advanced";
    }
                                            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="divBasic">Basic data</div>

<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>

    <a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Hide Advanced ></a>

使用ele.toggle("slide");从左向右滑动，使用jquery-ui获得效果