How can I break out of an each() in jQuery?
<p>I have the following HTML + JS. I want the toggleButton to only toggle the first io-section-header. Eventually I will have multiple toggleButton's that will toggle a unique ul.</p>

<p>How can I achieve this?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div&gt;&lt;span&gt;Section 1&lt;/span&gt;&lt;/div&gt;
  &lt;div class="io-section-header"&gt;
  &lt;ul&gt;
    &lt;li class="advanced"&gt;Accounts&lt;/li&gt;
    &lt;li class="advanced"&gt;People&lt;/li&gt;
    &lt;li class="advanced"&gt;companies&lt;/li&gt;
    &lt;li class="basic"&gt;She&lt;/li&gt;
  &lt;/ul&gt;
   &lt;div&gt;&lt;span&gt;Section 2&lt;/span&gt;&lt;/div&gt;
   &lt;div class="io-section-header"&gt;
    &lt;ul&gt;
    &lt;li class="advanced"&gt;Accounts&lt;/li&gt;
    &lt;li class="advanced"&gt;People&lt;/li&gt;
    &lt;li class="advanced"&gt;companies&lt;/li&gt;
    &lt;li class="basic"&gt;P&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="toggleButton"&gt;Collapse&lt;/div&gt;

&lt;script&gt;
    jQuery(function ($) {
        $('.toggleButton').click(function () {  
            var currentText = $(this).text();
            if(currentText === "Collapse")
                $(this).text("Expand");
            else
                $(this).text("Collapse");

            /*$('.io-section-header').each(function() {
                $("li").siblings(".advanced").toggle('fast',function(){});
            });*/

            $('.io-section-header li').siblings(".advanced").toggle('fast'); 

        });
    });
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
