Having issues with css transforms and javascript

Question

I'm trying to use css transforms with js to pull up a list from a link when pressed. The function seems to work when I click the link, but the list does not disappear or go down when I click it for the second time.

I'm not sure what I am doing wrong here, but help would be appreciated!

 function one(){ var j=document.getElementById("start"); if(j.style.transform=="translate3d(0vw,0vw,0vw)"){j.style.transform="translate3d(0vw,30vw,0vw)"} else{j.style.transform="translate3d(0vw,0vw,0vw)"} }

 #test a{width:50%; height:auto; overflow:auto; float:left; margin:0% 0% 0% 0%; background:rgba(20,20,20,0.5); } #start{ float:left; background:blue; width:50%; height:auto; transform:translate3d(0vw,30vw,0vw); transition:0.5s;} #start ul{width:100%; height:auto; float:left; }

 <div id="start"> <ul> <li> List</li> <li> List</li> <li> List</li> <li> List</li> </ul> </div> <div id="test"><a href="#" onclick="one()">Click to show</a> /<div>

Answer 1

This check is failing

if(j.style.transform=="translate3d(0vw,0vw,0vw)")

because the actual value has spaces in between the parameters. Change it to

if(j.style.transform=="translate3d(0vw, 0vw, 0vw)")

 function one(){ var j=document.getElementById("start"); if(j.style.transform=="translate3d(0vw, 0vw, 0vw)"){j.style.transform="translate3d(0vw,30vw,0vw)"} else{j.style.transform="translate3d(0vw,0vw,0vw)"} }

 #test a{width:50%; height:auto; overflow:auto; float:left; margin:0% 0% 0% 0%; background:rgba(20,20,20,0.5); } #start{ float:left; background:blue; width:50%; height:auto; transform:translate3d(0vw,30vw,0vw); transition:0.5s;} #start ul{width:100%; height:auto; float:left; }

 <div id="start"> <ul> <li> List</li> <li> List</li> <li> List</li> <li> List</li> </ul> </div> <div id="test"><a href="#" onclick="one()">Click to show</a> /<div>