title: jQuery on click the box should stay open?
body: <p>It is not simple to explain... this is my HTML &amp; jQuery code:</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div class="button"&gt;
      search
      &lt;div class="hiddencontent"&gt;&lt;input type="search" name="search" /&gt; &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="button"&gt;
      phone
      &lt;div class="hiddencontent"&gt;9464564654564&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="button"&gt;
      mail
      &lt;div class="hiddencontent"&gt;example@example.com&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCRIPT :</strong></p>
  
  <pre><code>$('.button').on('click', function () {
      if ($(this).hasClass('active')) {
          $(this).find('.hiddencontent').fadeOut();
          $(this).removeClass('active');
      } else {
          $('.hiddencontent').fadeOut();
          $(this).addClass('active').fadeIn();
          $(this).find('.hiddencontent').fadeIn();
      }
  });
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/pgt488af/" rel="nofollow">JSfiddle</a></strong></p>
  
  <p>By the first button "search" I have a input box, on other boxes is the effect ok. but when I click inside this input box the box going closed, what have I to do to keep it open?</p>