如何使用javascript將div向下切換到左右滑動

Question

嗨，我有2個div，一個被命名為basic，另一個是高級的。 然后我有顯示高級按鈕。 當我單擊顯示高級按鈕時，它會向下切換。 但我希望它從右向左滑動。

這是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獲得效果

Answer 2

用這個

 $('#divAdvanced').toggle('slide', {
        direction: 'left'
    }, 1000);

你可以改變left到right ，只要你喜歡