main.js

// Declare Button Variables
const displayButton = document.querySelector('#display-text');
const visibilityButton = document.querySelector('#visibility-text');
const contentButton = document.querySelector('#content-text');
const resetButton = document.querySelector('#reset');

const dispExpDiv = document.querySelector('#disp-exp-div');
const visExpDiv = document.querySelector('#vis-exp-div');
const contExpDiv = document.querySelector('#cont-exp-div');

const middlePic = document.querySelector('#visibility-image');

//---------------------------------------------------------------

// Change css for each button attribute
displayButton.onclick = function disp() {
    middlePic.style.display = "none";
    dispExpDiv.style.display = "block";
    visibilityButton.style.display = "none";
    contentButton.style.display = "none";   
}

visibilityButton.onclick = function vis() {
    middlePic.style.visibility = "hidden";
    visExpDiv.style.display = "block";
    displayButton.style.display = "none";  
    contentButton.style.display = "none";  
}

contentButton.onclick = function cont(){
    middlePic.style.contentVisibility = "hidden";
    contExpDiv.style.display = "block";
    displayButton.style.display = "none"; 
    visibilityButton.style.display = "none";
}

resetButton.onclick = function reset(){
    middlePic.style.contentVisibility = "visible";
    middlePic.style.visibility = "visible";
    middlePic.style.display = "block";
    contExpDiv.style.display = "none";
    visExpDiv.style.display = "none";
    dispExpDiv.style.display = "none";
    displayButton.style.display = "block"; 
    visibilityButton.style.display = "block";
    contentButton.style.display = "block"; 
}

//---------------------------------------------------------------

const browserButton = document.querySelector('#browser-show-div');
const browserList = document.querySelector('#browser-div');

browserButton.onclick = function browser() {
    if (browserList.style.display === "none")
      browserList.style.display = "block" 
    else {
        browserList.style.display = "none";
    }
}