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

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -