example.html

<!DOCTYPE html>
<html>
    <head>
        <style>
            details, .example {
                padding: 2em;
                background: #fafafa;
                border: 1px solid #eee;
                margin: 1em;
                width: 40%;
            }
            p:before,
            summary:before,
            details:before {
                color: #ccc;
                font-style: italic;
            }

            summary:before { content: 's: '; }
            p:before { content: 'p: ';}
            details:before { content: 'd: '; position: absolute; top:1.5em; left:2em;}

            summary { color: #c66; }
            details summary { color: #111;}
            details { color: #bada55; }
            p { color: #333;}

        </style>
        <script>
        if (! ('open' in document.createElement('details'))) {
          var s = document.createElement('script');
          s.async = true;
          s.src = 'https://rawgit.com/uniqname/Details-Polyfill/master/details.polyfill.min.js';
          var scripts = document.getElementsByTagName('script');
          var currentScript = scripts[scripts.length - 1];
          currentScript.parentElement.insertBefore(s, document.currentScript);
        }
        </script>
    </head>
    <body>
        <details>
            <summary>And the winner is...</summary>
            <summary>Drumroll please...</summary>
            <summary>The anticipation is killing me...</summary>
            Me of course.
        </details>


        <details>
            And the winner is...
            <p>Drumroll please...</p>
            <summary>The anticipation is killing me...</summary>
            Me of course.
        </details>
        <div>
            <summary>And the winner is...</summary>
            <details>
                <p>Drumroll please...</p>
                <p>The anticipation is killing me...</p>
                Me of course.
            </details>
        </div>
        <details>
            <summary>And the winner is...</summary> Drumroll please... </span>The anticipation is killing me...</span>
            Me of course.
        </details>
        <script>
        setTimeout(function () {
          var div = document.createElement('div');
          div.innerHTML = '<details><summary>Hey, hey. You, you.</summary> I dont like your girlfriend</details>';
          document.body.appendChild(div);
        }, 4000);
        </script>
    </body>
</html>