title: What is alternative to use after jQuery 1.9 removed .toggle(function,function)?
body: <p>Hi i'm trying to create something that will alternate shrinking and growing on every click, but i'm using <code>jQuery 1.9</code> for my website. the <code>.toggle(function,function)</code> function was removed from <code>jQuery 1.9</code>, so I'm not really sure what I should use instead.</p>
  
  <p>Any help would be great.</p>
  
  <p>Thanks</p>
  
  <p>jsfiddle (uses old code, the jquery 1.8 version): <a href="http://jsfiddle.net/TNAC6/" rel="noreferrer">http://jsfiddle.net/TNAC6/</a></p>
  
  <p>new jsfiddle (jquery 1.9): <a href="http://jsfiddle.net/TNAC6/1/" rel="noreferrer">http://jsfiddle.net/TNAC6/1/</a></p>
  
  <p>Here is my code I'm trying to make toggle. Basically the thing i'm toggling is a circle div.</p>
  
  <pre><code>(function($){
      $.fn.createToggle = function(size) {
          var ele = $(this);
          var oldSize = ele.width();
          console.log("creating new toggle on element: " + ele + " old: " + oldSize + " new: " + size );
          console.log("its content is" + ele.children(".content"));
          var growfn = function() {
              $(this).stop().animate({
                  'width': size+'px',
                  'height': size+'px',
                  'margin-left': '-'+(size/2)+'px',
                  'margin-top': '-'+(size/2)+'px'
              }, 500);
              $(this).children(".content").toggle();
          };
          var shrinkfn = function() {
              $(this).stop().animate({
                  'width': oldSize+'px',
                  'height': oldSize+'px',
                  'margin-left': '-'+(oldSize/2)+'px',
                  'margin-top': '-'+(oldSize/2)+'px'
              }, 500);
              $(this).children(".content").toggle();
          };
          ele.click(function() {
  //insert code to toggle stuff
          });
      };
  })(jQuery);
  
  $(".home").createToggle(500);
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>.circleBase {
      -webkit-border-radius: 999px;
      -moz-border-radius: 999px;
      border-radius: 999px;
      behavior: url(PIE.htc);
  }
  
  .home {
      width: 200px;
      height: 200px;
      background: #FF5032;
      position: absolute;
      top: 300px;
      left: 300px;
      margin-left: -100px;
      margin-top: -100px;
  }
  
  .title {
      position: relative;
      padding-top: 10%;
      text-align: center;
      font-weight: bold;
      font-size: 24px;
  }
  
  .content {
      text-align: center;
      display: none;
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;div class="circleBase home"&gt;
      &lt;p class="title"&gt;Glen Takahashi&lt;p&gt;
      &lt;p class="content"&gt;THIS IS CONTENT&lt;BR&gt; THIS IS CONTENT&lt;BR&gt; THIS IS CONTENT&lt;BR&gt; THIS IS CONTENT&lt;BR&gt; THIS IS CONTENT&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>