title: Input isn't autofocusing when triggered
body: <p><strong><a href="http://codepen.io/modermo/pen/mEbypN?editors=0010" rel="nofollow">Codepen</a></strong></p>
  
  <p>Basically I want the input field contained within a div to autofocus when it opens. At the moment, it does auto-focus, but only when the div is closing. </p>
  
  <p>The div that the input is contained is Trigger 2.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
           &lt;span class="trigger" data-target-id="target-1"&gt;Trigger 1&lt;/span&gt;
           &lt;div id="target-1" class="target"&gt;Target to reveal when I press Trigger 1&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
           &lt;span class="trigger" data-target-id="target-2" id="search-trigger"&gt;Trigger 2&lt;/span&gt;
           &lt;div id="target-2" class="target"&gt;Target to reveal when I press Trigger 2
            &lt;input id="boom" type="text"&gt;
            &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
           &lt;span class="trigger" data-target-id="target-3"&gt;Trigger 3&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="target-3" class="target"&gt;This recipient is intentionally outside the ul containing the triggers&lt;/div&gt; 
  </code></pre>
  
  <p>And the jQuery:</p>
  
  <pre><code>// This is the code for the input focus
  
  $("#search-trigger").click(function(){
    $("#boom").focus();
  });
  </code></pre>