title: jquery toggle not working
body: <p>I have created a function I want a div to increase height and opacity and when click again it should return to it's original state so I used toggle function to do that now the problem is that when page loads the button get disappears</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#cm_now').toggle(function() {
      $('.search_bx_ar').css({
        'opacity': '1'
      });
      $('.search_bx_ar').css({
        'height': '40px'
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.search_bx_ar {
    position: relative;
    margin: 0 0 10px 0;
    width: 100%;
    opacity: 0;
    height: 0px;
    transition: ease-in-out all .5s;
    -webkit-transition: ease-in-out all .5s;
    -moz-transition: ease-in-out all .5s;
  }
  
  .compare_sr_btn {
    float: right;
    width: 25%;
    padding-left: 15px;
    margin: 15px 0 10px 0;
  }
  
  .compare_sr_btn&gt;#cm_now {
    background-color: #2b7f7f;
    color: #fff;
    border: none;
    height: 40px;
    line-height: 40px;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="compare_sr_btn"&gt;
    &lt;input type="button" id="cm_now" value="Compare Now" /&gt;
  &lt;/div&gt;
  &lt;div class="search_bx_ar"&gt;
    &lt;input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>