title: Show/hide <li> by jQuery
body: <p>I have html like</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="dropdown"&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li class="dropdown"&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li class="dropdown"&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;li&gt;text&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li {display:none;}
  li.dropdown {display:block;}
  </code></pre>
  
  <p>When we click on <code>li.dropdown</code>, all the <code>&lt;li&gt;</code> without classes, from the current to the next <code>li.dropdown</code>, should become visible. And opposite action when we click it again - hide <code>&lt;li&gt;</code> without class <code>dropdown</code>.</p>
  
  <p>How do I do this?</p>