function showCode(parentElement) {

var parentElementDiv = document.getElementById(parentElement);

var exampleElement = document.querySelector('#' +

parentElement + ‘.example’)

if(parentElementDiv.className == ‘section open’) {

var codeBlock = exampleElement.querySelector('.example-code’);

exampleElement.removeChild(codeBlock);

document.querySelector('#' + parentElement + ‘.code-show-

button’).value = ”Show code”;

parentElementDiv.classList.remove(‘open’);

} else {

var text = exampleElement.innerHTML;

var code = document.createTextNode(text);

var codeElement = document.createElement(‘div’);

codeElement.appendChild(code);

codeElement.className = ‘example-code’;

exampleElement.appendChild(codeElement);

document.querySelector('#' + parentElement + ‘.code-show-

button’).value = “Hide code”;

parentElementDiv.classList.add(‘open’);

}

}

Now all that’s left to do is to write the single CSS rule for our ‘.example-code’ div.

For this I will now hand control back over to you to complete this task. Head over to your ‘main.css’ file and write the following rules for the property ‘.example-code’:

• A background of #333.
• Text colour of white.
• Padding of 10px.
• Rounded corners with a radius of 10px.
• 20px margin from the top of the div.

If you coded this correctly, you should end up with the following code: