CODEWITHSUNDEEP
javascriptcss
Majora
Majora

Reputation: 77

Having issues with css transforms and javascript

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>

Upvotes: 1

Views: 51

Answers (1)

takendarkk
takendarkk

Reputation: 3445

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>

Upvotes: 2

Related Questions