title: how to slide div right while on click a button using jquery or javascript?
body: <p>i want to slide a div when user click on support button from right to left.i have tried the following code.. but its not working correctly for me... </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function () {
      $('[id$=aSupport]').live('click', function (e) {
  
          if ($('[id$=hdfsupportcount]').val() == 1) {
              $('[id$=hdfsupportcount]').val(0);
  
              $('[id$=divSupport]').css({ 'right': '' }).animate({
                  'left': '0px'
              });
              // $('[id$=divSupport]').css('display', 'none');
          } else {
              $('[id$=hdfsupportcount]').val(1);
  
              $('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({
                  'right': '30px'
              });
              $('[id$=divSupport]').css('display', 'block');
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Html code is:</p>
  
  <pre><code>&lt;div&gt;
      &lt;asp:HiddenField ID="hdfsupportcount" runat="server" /&gt;
      &lt;div style="float: right; position: fixed; top: 35%; right: -3px;"&gt;
          &lt;a href="javascript:void(0);" class="signin" title="Support" id="aSupport"&gt;
              &lt;img src="support_button2.png" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="divSupport" style="height: 500px; width: 270px; float: right; position: fixed;
          top: 35%; right: 21px; display: none;"&gt;
          &lt;div id="ContactMenu"&gt;
              &lt;div id="topnav" class="topnav"&gt;
              &lt;/div&gt;
              &lt;div id="signin_menu"&gt;
                  &lt;div id="signin"&gt;
                      &lt;div style="width: 100%; font-weight: bold; font-size: 22px; color: Black;"&gt;
                          &lt;div style="width: 27px; float: left"&gt;
                          &lt;/div&gt;
                          &lt;div style="float: left; margin-top: 1px"&gt;
                              123-456-7890&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;br clear="all" /&gt;
                      &lt;br /&gt;
                      &lt;p&gt;
                          &lt;label style="font-weight: bold; color: Black"&gt;
                              Contact Us&lt;/label&gt;
                      &lt;/p&gt;
                      &lt;p&gt;
                          &lt;label&gt;
                              Email&lt;/label&gt;
                          &lt;asp:TextBox ID="txtContactEmail" runat="server"&gt;&lt;/asp:TextBox&gt;
                      &lt;/p&gt;
                      &lt;p&gt;
                          &lt;label&gt;
                              Message&lt;/label&gt;
                          &lt;asp:TextBox ID="txtMessage" TextMode="MultiLine" runat="server"&gt;&lt;/asp:TextBox&gt;
                      &lt;/p&gt;
                      &lt;asp:Button ID="btnContactUs" CssClass="signin_submit" runat="server" Text="Send"
                          ValidationGroup="ContactUS" OnClick="btnContactUs_Click" /&gt;
                      &lt;asp:Button ID="btnContactUsCancel" CssClass="signin_submit" runat="server" Text="Cancel"
                          OnClick="btnContactUsCancel_Click" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When we click on buttons first time.the div slides to left but when i click on button again i want to slide it to right and div will be hide. ...please help me... </p>