title: Disable toggle based on a condition
body: <p>I am trying to disable a toggle function based on the value of the input field. Below is the markup</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;input type="text" class="search" placeholder="Search..." id="search"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type="submit" id="search-submit"&gt;&lt;span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Initially the search input will have width set to 0. On clicking the submit button, a toggle class is added which will animate the width of the text input. If there's any value in the text input, on clicking the submit button it should redirect to a page but it shouldn't toggle. I tried the below javascript but somehow not able to disable the toggle.</p>
  
  <pre><code>$('.sm-search button').click(function () {
   $('.search').toggleClass('search-expand');
  });
  $('.search').on('change keyup paste', function () {
   if ($(this).val() != "") {
    $('.sm-search button').click(function () {
     window.location.href = "/some-url";
     $('.search').addClass('search-expand');
    });
   } 
  });
  </code></pre>