Can't toggle from right to left Jquery

Question

I have two icons (Bootstraps Glyphicon) which are places as

1 : Menu Which as left of screen 2 : Gift which is at the right of the screen.

When Clicked on Menu the toggle appears from Left to Right. This works fine. But when the Gift is clicked it appears in some weird position as shown in the image with the name Suraj Palwe This is at left part of the image. I want this to appear from right of the screen to moving towards the left as per the width of div.

This is the image how it looks. JSfiddle

This is the what I have written in my code

style

.slide_birthday_click{
          margin-top: 2%;
          padding: 5px;

          background: grey;
          height: auto;
          display:none;
          position:absolute;
          z-index: 5;
          float: right;
        }

in html body

<div class="slide_birthday_click">
        <table class="table">
          <tr>
            <td>Suraj Palwe</td>
          </tr>
        </table>
    </div>
<span class="glyphicon glyphicon-gift" style="float:right;" id="today_birthdays"></span>

The Jquery Part

$("#today_birthdays").click(function(){
        $(".slide_birthday_click").toggle("slide",{direction:'right'},2000);
      });

I want that Block Which contains the word Suraj Palwe to right of the screen as it toggles from right to left.

I am not getting where I am doing wrong in my code. Thanks in advance!

Answer 1

Okay This is how I solved my problem. One thing was missing in it!

Just added right:0; to the css file

.slide_birthday_click{
      margin-top: 2%;
      padding: 5px;
      background: grey;
      height: auto;
      display:none;
      position:absolute;
      z-index: 5;
      float: right;
      right: 0;
    }

Thanks to all!

This is the link to JS Fiddle Answer

Answer 2

Try with:

$("#today_birthdays").delay(200).show("slide", { direction: "right" }, 1500);