How can I break out of an each() in jQuery?
I have the following HTML + JS. I want the toggleButton to only toggle the first io-section-header. How can I achieve this?

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <div><span>Section 1</span></div>
      <div class="io-section-header">
      <ul>
        <li class="advanced">Accounts</li>
        <li class="advanced">People</li>
        <li class="advanced">companies</li>
        <li class="basic">She</li>
      </ul>
       <div><span>Section 2</span></div>
       <div class="io-section-header">
        <ul>
        <li class="advanced">Accounts</li>
        <li class="advanced">People</li>
        <li class="advanced">companies</li>
        <li class="basic">P</li>
      </ul>
      </div>
      </div>
      
      <div class="toggleButton">Collapse</div>
      
    <script>
    	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'); 
    
    		});
    	});
    </script>
    
    </body>
    </html>
How can I break out of an each() in jQuery?
===

I have the following HTML + JS. I want the toggleButton to only toggle the first io-section-header. How can I achieve this?

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <div><span>Section 1</span></div>
      <div class="io-section-header">
      <ul>
        <li class="advanced">Accounts</li>
        <li class="advanced">People</li>
        <li class="advanced">companies</li>
        <li class="basic">She</li>
      </ul>
       <div><span>Section 2</span></div>
       <div class="io-section-header">
        <ul>
        <li class="advanced">Accounts</li>
        <li class="advanced">People</li>
        <li class="advanced">companies</li>
        <li class="basic">P</li>
      </ul>
      </div>
      </div>
      
      <div class="toggleButton">Collapse</div>
      
    <script>
    	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'); 
    
    		});
    	});
    </script>
    
    </body>
    </html>