title: Select one (this) item from <li> (jQuery/javascript)
body: <p>I have a <code>&lt;ul&gt;</code> list in my HTML, and inside each <code>&lt;li&gt;</code> within that, I have an element with the id <code>vid</code>.</p>
  
  <p>With jQuery, I want to make it so that when I click the title of each <code>&lt;li&gt;</code>, the <code>#vid</code> element in <em>that</em> <code>&lt;li&gt;</code> (just the one that was clicked) will appear/disappear.</p>
  
  <p>My code to toggle the <code>#vid</code> div works, but it affects all of the <code>#vid</code> elements, not just one.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="list"&gt;
      &lt;li&gt;
        &lt;h3 class="title"&gt;First Title&lt;/h3&gt;
        &lt;p class="tags"&gt;tags, tags, tags&lt;/p&gt;
        &lt;div id="vid"&gt;
    Now you see me!
  &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;h3 class="title"&gt;Second Title&lt;/h3&gt;
        &lt;p class="tags"&gt;etc, etc, etc&lt;/p&gt;
        &lt;div id="vid"&gt;
    Now you see me!
        &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var thisli = $('li', this);
    var thisvid = $('#vid', thisli);
    var clicks = 0;
  
    $('h3', this).click(function() {
      if(clicks % 2 === 0){
        $(thisvid, this).show();
        }else{
        $(thisvid, this).hide();
          }
      ++clicks;
  });
    });
  </code></pre>