// 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"); } };
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter