// show mobile menu onclick

document.getElementById("icon").addEventListener("click", function menu() {
    var x = document.getElementById("md");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
)

// show hemp submenu

document.getElementById("chevron_1").addEventListener("click", function menu() {
    var x= document.getElementById("down_1");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
)

// spider submenu

document.getElementById("chevron_2").addEventListener("click", function menu() {
    var x= document.getElementById("down_2");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
)

// offgrid submenu

document.getElementById("chevron_3").addEventListener("click", function menu() {
    var x= document.getElementById("down_3");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
)

// index 

// button 1

let btn_1 = document.getElementById("b_1");
var p_1= document.getElementById("c_1");
let hemp = document.getElementById("hemp");
p_1.style.display = "none";

btn_1.addEventListener("click", () => {
    if (p_1.style.display === "none") {
        p_1.style.display = "flex";
        hemp.style.zIndex = "9";
    }
        else {
            p_1.style.display ="none";
            hemp.style.zIndex = "0";
        }
    }
);

// button 2
let btn_2 = document.querySelector("#b_2");
let p_2= document.getElementById("c_2");
let permapp = document.getElementById("permapp");
p_2.style.display = "none";

btn_2.addEventListener("click", () => {
    if (p_2.style.display === "none") {
        p_2.style.display = "flex";
        permapp.style.zIndex = "9";
    }
        else {
            p_2.style.display ="none";
            permapp.style.zIndex = "0";
        }
    }
);

// button 3
let btn_3 = document.querySelector("#b_3");
let p_3= document.getElementById("c_3");
let spider = document.getElementById("spider");
p_3.style.display = "none";

btn_3.addEventListener("click", () => {
    if (p_3.style.display === "none") {
        p_3.style.display = "flex";
        spider.style.zIndex = "9";
    }
        else {
            p_3.style.display ="none";
            spider.style.zIndex = "0";
        }
    }
);


// button 4
let btn_4 = document.querySelector("#b_4");
let p_4= document.getElementById("c_4");
let cube = document.getElementById("cube");
p_4.style.display = "none";

btn_4.addEventListener("click", () => {
    if (p_4.style.display === "none") {
        p_4.style.display = "flex";
        cube.style.zIndex = "9";
    }
        else {
            p_4.style.display ="none";
            cube.style.zIndex = "0";
        }
    }
);

// button 5
let btn_5 = document.querySelector("#b_5");
let p_5= document.getElementById("c_5");
let offgrid = document.getElementById("offgrid");
p_5.style.display = "none";

btn_5.addEventListener("click", () => {
    if (p_5.style.display === "none") {
        p_5.style.display = "flex";
        offgrid.style.zIndex = "9";
    }
        else {
            p_5.style.display ="none";
            offgrid.style.zIndex = "0";
        }
    }
);



// button 6
let btn_6 = document.querySelector("#b_6");
let p_6= document.getElementById("c_6");
let cyber = document.getElementById("cyber");
p_6.style.display = "none";

btn_6.addEventListener("click", () => {
    if (p_6.style.display === "none") {
        p_6.style.display = "flex";
        cyber.style.zIndex = "9";
    }
        else {
            p_6.style.display ="none";
            cyber.style.zIndex = "0";
        }
    }
);

// button 7
let btn_7 = document.querySelector("#b_7");
let p_7= document.getElementById("c_7");
let machina = document.getElementById("machina");
p_7.style.display = "none";

btn_7.addEventListener("click", () => {
    if (p_7.style.display === "none") {
        p_7.style.display = "flex";
        machina.style.zIndex = "9";
    }
        else {
            p_7.style.display ="none";
            machina.style.zIndex = "0";
        }
    }
);

// button 8
let btn_8 = document.querySelector("#b_8");
let p_8= document.getElementById("c_8");
let miner = document.getElementById("miner");
p_8.style.display = "none";

btn_8.addEventListener("click", () => {
    if (p_8.style.display === "none") {
        p_8.style.display = "flex";
        miner.style.zIndex = "9";
    }
        else {
            p_8.style.display ="none";
            miner.style.zIndex = "0";
        }
    }
);





















  
// this function shows an element by id

function show() {
    var x= document.getElementById("information");
    if (x.style.display === "none") {
        x.style.display = "flex"; }
        else {
            x.style.display ="none";
        }
    }
//this function shows element2 by id -to be generalized

function display() {
    var x= document.getElementById("footer-links");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }