title: Using jquery to animate a div button into a bigger menu
body: <p>I am trying to make a menu button that when you click it it becomes bigger and it has menu items in it using jquery but for some reason it just disappears here is the jquery i'm using for it here is the page i'm having trouble on </p>
  
  <p>billischill.ddns.net/testroom.php</p>
  
  <pre><code>$(document).on("click", "#addtomsg", function(){
      $('#addtomsg').addClass('open');
  })
  </code></pre>
  
  <p>and here are my styles</p>
  
  <pre><code>#addtomsg.open{
      width: 80px;
      height: 80px;
     }
  #addtomsg p{
      margin-top:3px;
     }
  #addtomsg{
      position: fixed;
      float: left;
      margin-left:30px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border:none;
      width: 40px;
      height:20px;
      background:#006666;
     }
  </code></pre>
  
  <p>and here is my html</p>
  
  <pre><code>&lt;/div&gt;
  
  &lt;form name="message" id="fixedinput"action=""&gt;
  &lt;div name="addtomsg" id="addtomsg"&gt;
    &lt;center&gt;
    &lt;p&gt;+&lt;p&gt;
    &lt;/center&gt;
  &lt;/div&gt;
      &lt;input name="usermsg" type="text" id="usermsg" size="73"class="textinpt" /&gt;
      &lt;input name="submitmsg" type="submit"  id="submitmsg" value="Send" class="submit2"/&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>can someone please help me</p>