HTML5 Summary and Details / Polyfills

I've been learning some of the new features on HTML5 and was introduced to the <summary> and <details> tags. These are great, but they aren't compatible on all browsers (namely IE and Firefox).

The fix is to use a polyfill. However, I just completed the beginner javascript course, and the polyfill code I was able to find online was too complex for me at this point.

Does anyone have any resources for a simple javascript polyfill for just text? I basically have a heading and a paragraph underneath, the paragraph being the portion that I want to initially hide until clicking on the heading.

Not sure if this is helpful, but below is the code I used.

Here is the simple html:

<details>
<summary>I styled this to look like an h3    heading.
</summary>
<p>Detailed text.</p>   
</details>

Here is the styling:

summary {
    outline: none; 
    color:#4e6512;
    font-size: 16px; 
    font-weight: bold; 
    padding-bottom: 10px; 
    margin-bottom: 10px; 
}

summary::-webkit-details-marker {
   color:#4e6512; 
   background:#FFFFFF; 
}

details[open] summary::-webkit-details-marker {
 color:#809c38; 
 background:#FFF;
}

Any help would be appreciated!

Thank you!