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>

translate3d(0vw,0vw,0vw) --> translate3d(0vw, 0vw, 0vw)

Temani Afif
– Temani Afif

2020-02-28 21:27:18 +00:00
Commented Feb 28, 2020 at 21:27 — Temani Afif
– Temani Afif, Commented Feb 28, 2020 at 21:27

takendarkk · Accepted Answer · 2020-02-28 21:27:42Z

2

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>

answered Feb 28, 2020 at 21:27

takendarkk

3,4568 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roy Over a year ago

1. Adding / removing a class with the needed CSS would be a better suggestion. 2. The anchor should be a button element.

Majora Over a year ago

Thank you, @takendarkk. that absolutely worked! I wanted to ask one more thing if I may. I'm trying to add opacity to the function above, but I'm not sure if I'm doing this right. function one(){ var j=document.getElementById("start"); if(j.style.transform=="translate3d(0vw, 9vw, 0vw)"; & j.style.opacity=="1"){j.style.transform="translate3d(0vw,30vw,0vw)"; && j.style.opacity="0"} else{j.style.transform="translate3d(0vw,9vw,0vw)"; && j.style.opacity="1"} }

Collectives™ on Stack Overflow

Having issues with css transforms and javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related