JSFiddle - React, Tailwind, and code Playground

HTML

<div id="head" class="head"></div>
<div id="navMain"></div>
<iframe src="http://www.w3schools.com/" id="iMainContents"></iframe>

CSS

.head { width: 50px; height: 50px; background-color:green;}
.head_small { width: 25px; height: 25px; background-color: green;}
#navMain { width: 50px; height: 50px; background-color:purple;}
#iMainContents {display:none;}

JavaScript

// index.html
var head = document.getElementById('head');
var siteLogo = document.getElementById('siteLogo');
var navMain = document.getElementById('navMain');
var navLinks = document.getElementsByClassName('navLink');
var iMainContents = document.querySelector('iframe#iMainContents');


// change class of #head 
function changeHeadClass(from, to) {
	if(head.className === from) {head.className = to;}
};

// event when clicked #navMain
navMain.onclick = function(){
	changeHeadClass('head','head_small');
    
    // below sentence 'if()' is the error point.
	if(iMainContents.style.display == 'none') {
        iMainContents.style.display = 'initial';
    };
}