javascript - Hide one element when I click on another one -
when click first link sets #foto height 200px. if click second link, sets #foto1 height 200px.
what want when clicking on 2nd link set #foto height 0px , vice versa. help?
function ver(fotox, texto1) { var x = document.getelementbyid(fotox); x.style.height = '200px'; x.innerhtml = texto1; } .link { padding: 10px } #foto, #foto1 { background-color: orange; margin-top: 20px; height: 0px; overflow: hidden } <a href="#" class="link" onclick="ver('foto','hola')">1</a> <div id="foto"> parte 1</div> <a href="#" class="link" onclick="ver('foto1','chau')">3</a> <div id="foto1"> parte 2</div>
you set elements want toggle class. i've set them linkdiv in snippet below , toggle them accordingly. if you're adding new elements whom want hide , show can add them. add class linkdiv it.
function ver(fotox,texto1) { var x = document.getelementbyid(fotox); if(x.style.height=="" || x.style.height=="0px") x.style.height= '200px'; else x.style.height='0px'; x.innerhtml= texto1; var element=document.getelementsbyclassname('linkdiv'); for(var i=0; i<element.length;i++){ if(element[i].getattribute("id")!=fotox) { //console.log("compared "+element[i].getattribute("id")+fotox); element[i].style.height= '0px'; } } } .link { padding:10px } #foto, #foto1 { background-color:orange; margin-top: 20px; height: 0px; overflow:hidden } <a href="#" class="link" onclick="ver('foto','hola')">1</a> <div id="foto" class="linkdiv"> parte 1</div> <a href="#" class="link" onclick="ver('foto1','chau')">3</a> <div id="foto1" class="linkdiv"> parte 2</div>
Comments
Post a Comment