title: Adding HTML5 hidden attribute support to jQuery .toggle() method
body: <p>I'd like to pair <a href="http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute" rel="nofollow noreferrer">HTML5 <code>hidden</code></a> support with jQuery's .toggle() method.</p>
  
  <p>So given <code>&lt;p id="myElement"&gt;Hi there&lt;/p&gt;</code></p>
  
  <p><code>$('#myElement').toggle()</code> would hide the element, and set <code>hidden="hidden"</code>: </p>
  
  <p><code>&lt;p id="myElement" style="display: none;" hidden="hidden"&gt;Hi there&lt;/p&gt;</code></p>
  
  <p>And executing the same <code>$('#myElement').toggle()</code> script again would show (toggle) the element, and remove the <code>hidden="hidden"</code> property (it is a boolean): </p>
  
  <p><code>&lt;p id="myElement" style="display: inline"&gt;Hi there&lt;/p&gt;</code></p>
  
  <p>I probably want to use the complete function of <a href="http://api.jquery.com/toggle/" rel="nofollow noreferrer">the method</a>, maybe something along the lines of </p>
  
  <pre><code>$('#myElement').toggle(
      if ($this.css('display')==='none'){
         $this.prop('hidden', 'hidden');
      }
      else
      {
         $this.removeProp('hidden');
      }
  )
  </code></pre>
  
  <p><strong>What's the most performant solution for extending <code>.toggle()</code> to also toggle the HTML5 <code>hidden</code> attribute? Is it redundant to do so?</strong></p>
  
  <p>This question is a variation of <a href="https://stackoverflow.com/questions/14596769/adding-wai-aria-support-to-jquery-toggle-method">Adding WAI-ARIA support to jQuery .toggle() method</a>; it was determined that it would be redundant to toggle the <code>aria-hidden</code> state in conjunction with toggling the element's display.</p>