title: Trying to animate a show/hide definition list with hidden attribute (hidden attribute causes animation to not work)
body: <p>I'm building an accessible accordion using a definition list.  I have this working well, where the <code>&lt;dt&gt;</code> contains a <code>&lt;button&gt;</code> which when clicked toggles an <code>aria-expanded</code> from true/false and toggles a <code>hidden</code> attribute on the corresponding <code>&lt;dd&gt;</code>. There's other things going on for accessibility but that's the basics for the list and the show/hide.</p>
  
  <p>The show/hide display of the <code>dd</code> is then controlled via a hidden attribute selector (in this case, this is coming from the bootstrap stylesheet):</p>
  
  <pre><code>[hidden] {
    display: none!important;
  }
  </code></pre>
  
  <p>The show/hide functionality right now is a hard show/hide and I'm trying to add a nice animation via css transitions (this needs to work in IE11 where transitions are supported.)</p>
  
  <p>I built a simple POC for the animation at <a href="http://jsfiddle.net/jokvqy6u/" rel="nofollow noreferrer">http://jsfiddle.net/jokvqy6u/</a> which just toggles a <code>show</code> and <code>hide</code> class. This was just something I could quickly throw together and send out to our marketing team to illustrate the animation to get feedback on.</p>
  
  <p>I thought I'd be able to just easily add <code>hidden</code> and <code>:not(hidden)</code> selectors to the POC and it would work just fine, then I could retrofit into the real accordion, but the animation doesn't seem to work with <code>hidden</code> attributes on the html.  You can see a demo of that at <a href="http://jsfiddle.net/6zmdhqrn/2/" rel="nofollow noreferrer">http://jsfiddle.net/6zmdhqrn/2/</a> where the 2nd item animates because it <strong>does not</strong> have a <code>hidden</code> attribute. Items 1 and 3 have <code>hidden</code> attributes and do not even open up.</p>
  
  <p>Does anyone know why this is happening and how I can get my transitions working with <code>hidden</code> attributes?</p>
  
  <p><strong>EDIT</strong> I have it sort of half working at <a href="http://jsfiddle.net/6zmdhqrn/3/" rel="nofollow noreferrer">http://jsfiddle.net/6zmdhqrn/3/</a> by overriding the <code>[hidden]</code> selector coming from bootstrap with some important statements.  I still get a hard show, but the hide slides up.  I suspect it has to do with the element being <code>display:none</code> where the animations have no dimensions/info to start animating from? Still looking for info/tips on how to get the opening animation.</p>