title: jQuery toggle opens all hidden divs
body: <p>In the code below, I'm trying to <code>show/hide</code> the <code>toolOptions</code> span, when a  clicks on the <code>&lt;i class="icon-user user-icon"&gt;&lt;/i&gt;</code>. Right now, they'll show, but not just the one I click on, it'll show all. Is there a possibility of getting only the span that's under than icon to show?</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en" dir="ltr" class="client-js"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;Stack Example&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="http://localhost/site/css/bootstrap.css" media="screen"&gt;
  &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $(".user-icon").click(function(){
              $(".toolOptions").toggle();
          });
              return false;
          });
      &lt;/script&gt;
  
      &lt;style type="text/css"&gt;
      .toolOptions{
          display:none;
      }
      &lt;/style&gt;
      &lt;/head&gt;
  
  
      &lt;body&gt;
  
      &lt;div class="user"&gt;
      &lt;span&gt;User Name&lt;/span&gt;
      &lt;span class="tools"&gt;&lt;i class="icon-user user-icon"&gt;&lt;/i&gt;
      &lt;span class="toolOptions"&gt;
          &lt;li&gt;Option A&lt;/li&gt;
          &lt;li&gt;Option B&lt;/li&gt;
          &lt;li&gt;Option C&lt;/li&gt;
          &lt;li&gt;Option D&lt;/li&gt;
      &lt;/span&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="user"&gt;
      &lt;span&gt;User Name&lt;/span&gt;
      &lt;span class="tools"&gt;&lt;i class="icon-user user-icon"&gt;&lt;/i&gt;
      &lt;span class="toolOptions"&gt;
          &lt;li&gt;Option A&lt;/li&gt;
          &lt;li&gt;Option B&lt;/li&gt;
          &lt;li&gt;Option C&lt;/li&gt;
          &lt;li&gt;Option D&lt;/li&gt;
      &lt;/span&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="user"&gt;
      &lt;span&gt;User Name&lt;/span&gt;
      &lt;span class="tools"&gt;&lt;i class="icon-user user-icon"&gt;&lt;/i&gt;
      &lt;span class="toolOptions"&gt;
          &lt;li&gt;Option A&lt;/li&gt;
          &lt;li&gt;Option B&lt;/li&gt;
          &lt;li&gt;Option C&lt;/li&gt;
          &lt;li&gt;Option D&lt;/li&gt;
      &lt;/span&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>