I want to slide a form with some contents in my main page on a button click.
I am using as asp.net razor pages. 

Here is my Scenario. when i click on the highlighted button

Please refer Pic 1


  [1]: https://i.stack.imgur.com/9lTnI.png

One div with form should slide from right side of the page. The form will allow users to add their comments and the div will have previous comments added.

This is the Code for Button Click

    <button type="button" title="Comments" id="RequestFormChatBox"  class="btn btn-warning btn-sm">
                            <i class="far fa-comment" style="color:white;"></i>
                        </button>

Here is the RequestFormChatBox Page

    <div class="user-info">
        <div class="user-info-in">
            <div class="cc">Close</div>
            Comments
            <ul class="list-group">
                <li class="list-group-item">
                    <b>User 1</b>
                    <p>This is for testing</p>
                </li>
                <li class="list-group-item">
                    <b>User 2</b>
                    <p>This is for testing</p>
                </li>
                <li class="list-group-item">
                    <b>User 2</b>
                    <p>This is for testing</p>
                </li>
                <li class="list-group-item">
                    <b>User 2</b>
                    <p>This is for testing</p>
                </li>
                <li class="list-group-item">
                    <b>User 2</b>
                    <p>This is for testing</p>
                </li>
            </ul>
            <form>
                <textarea>Please Enter Your Comments</textarea>
                <input type="submit"/>
            </form>
        </div>
    </div>

I want to slide this page(div) in a ajax call. So that when each time user adds comments,it will be displayed.

This is my Ajax Code.But when click on the button the div is showing completely breaking the design instead of sliding from right side of page.

    $.ajax({
        url: '/RequestFormChatBox',
        success: function (result) {
            $("#RequestFormChatBox").click(function () {
                $("#RequestFormChatBox").html(result);
                //$(".user-info").fadeIn().find(".user-info-in").animate({ "right": 0 }, 200);
            });
           //$("#RequestFormChatBox").html(result);
        }
    });


Any help would be appreciated.