Возникли проблемы с css преобразованиями и javascript

Question

Я пытаюсь использовать css преобразования с js, чтобы вывести список из ссылки при нажатии. Кажется, что эта функция работает, когда я нажимаю на ссылку, но список не исчезает или go вниз, когда я щелкаю по нему во второй раз.

Я не уверен, что я делаю здесь неправильно, но помощь была бы признательна!

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

Эта проверка не проходит

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

, потому что фактическое значение имеет пробелы между параметрами. Измените его на

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>