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

} else {

}

More new code here, so let’s step through it again. We are looking at the variable we assigned at the top of our function, and picking off the property ‘className’ from it, which will return the classes added to the element. In our HTML we specified that the element has a class of ‘section’ so we need to be aware of this when we write our conditional statement for our if statement. In our code above we are detecting whether the element has the classes ‘section’ and ‘open’ assigned to it. If it does, then it will run the first set of braces, if not (else) it will run the next block of code. So let’s work first on the case where it does not have the open class, and therefore needs to show the code in the new div.

So what we’re going to do here is as follows. We are going to assign a variable to the content of the ‘.example’ div, then we are going to create a new div, and pass in the content. We’re going to give it an id of ‘example-code’, then we’re going to update the text of the button to say ‘Hide code’, then finally we’re going to add the class ‘open’ to the main section div to highlight that the code is exposed. Let’s look at the code for this.