How to change Toggle down div to right-left slide with javascript

Question

Hi i have 2 divs one is named as basic and other is advanced. Then I have button to show advanced. When I click on show advanced button it toggle down. But I want it to slide from right to left.

here is 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>

here is 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";
                                                }
                                            }

kindly help me get advanced div as slide from right to left

Thank you

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> 

Use ele.toggle("slide"); to slide left to right, and use jquery-ui to get the effect

Answer 2

use this

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

you can change left to right as you like