The standard collapsable HTML5 semantic markup `<detail>` and `<summary>` work finally flawlessly in FireFox and Chrome, but not in IE and Edge.

Any ideas how to fix this with (a tiny bit of light code) for IE and Edge?

jQuery 3.x is already loaded in my site so if the fix involves using something from that library to strealine the transition (linear or easing) then that would be great. Also nice would be a userselectable default setting to toggle weather the detail should appear "open" or "closed" at pageload. Thanks!

```js
if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge/i.test(navigator.userAgent)){

$(function(){
 $('summary').click(function(){
  $(this).parent().find('article').slideToggle();
 });
});

}
```

```css
details{
}
summary{
 cursor: pointer; cursor: hand;
 background-color: blue;
 display: block;
 padding: 10px;
 margin: 0 0 20px 0;
}

summary:after {
  background: yellow;
  content: "+";
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
}
details[open] summary:after {
 content: "-";
}

details summary::-webkit-details-marker {
 display:none; /* hides the standard > sign */
}
summary:focus {outline:0 !important;} /* hides the blue borderin chrome, once clicked */

@keyframes slideDown {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 100%;
    }
}

details[open] {
    animation-name: slideDown;
    animation-duration: 500ms;
    animation-timing-function:lineair;
}

article {display: block;} 
@media screen and (max-width: 767px) { 
    article {display:none;} 
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
<summary>Testing Testing</summary>
<article class="project">
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen). De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten. Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen. Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid.  Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>
</article>
</details>
```