Boton clickable, que muestra y oculta un div.

PHOTO EMBED

Tue Nov 16 2021 19:54:24 GMT+0000 (UTC)

Saved by @samn #javascript #css #html 

    // HTML
    <div id="box">
        <div id="item1">CLICK <br> item1</div>
        <div id="item2" class="none">item2</div>
    </div>

    // CSS
    #box{
        background-color: rebeccapurple;
        width:300px;
        height: 600px;
    }
    #item1{
        position: absolute;
        right: 20px;
        background-color: red;
        width:100px;
        height: 300px;
        cursor: pointer;
    }
    
    #item2{
        position: absolute;
        right: 140px;
        background-color: yellowgreen;
        width:150px;
        height: 300px;
    } 
    
    .block{
        display: block;
    }  //se separa en class diferentes las opciones puntuales que cambiaran dinamicamente.
    .none{
        display: none;
    }

// JavaScript
let item1 = document.getElementById("item1");
let item2= document.getElementById('item2');

let boton=document.getElementById("item1");
let contador=0;

item1.addEventListener("click",boton.onclick);

boton.onclick=function(){ // al agregar onclick capturamos los clicks
    contador++; 
    if (contador%2==0){  // modulo que distingue impar de par
        document.getElementById("item2").classList.add("none");
    }else{
        document.getElementById("item2").classList.remove("none");
        document.getElementById("item2").classList.add("block");
    }
};
content_copyCOPY

en el link agregado se encontró la idea para el contador de clicks.

https://tpec05.blogspot.com/2019/05/contador-de-clicks-operaciones-y.html