04.Sections

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sections</title>
        <style>
            #content {
                width: 1000px;
            }

            #content div {
                float: left;
                width: 300px;
                height: 300px;
                margin: 2em;
                background: #5555ff;
                text-align: center;
            }

            #content div p {
                color: white;
                margin: 6em 3em 6em 3em;
            }
        </style>
    </head>

    <div id="content">
    </div>
    <body onload="create(['Section 1', 'Section 2', 'Section 3', 'Section 4']);">

    <script>
        function create(sentences) {
            for(let i = 0; i < sentences.length; i++){
                let sentence = sentences[i];
                let newDiv = document.createElement('div');
                let newP = document.createElement('p');
                newP.style.display = 'none';
                newP.textContent = sentence;
                newDiv.appendChild(newP);
                newDiv.addEventListener('click', display);
                let content = document.getElementById('content');
                content.appendChild(newDiv);

                function display() {
                    newP.style.display = 'block';
                }
            }
        }
    </script>

    </body>

</html>