Reset CSS property dynamically using JavaScript

Question

I'm trying to create a box that has two states:

(a) The box is a width of 70% (b) The box is a width of 10%

The user should be able to click the box to alternate between the two states, so if the box is in state 'a' then it will transition to state 'b' when clicked. If the box is in state 'b' it will transition to state 'a' when clicked and so on. I'm using the css below to set the initial state of the box:

#box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}

I'm using the javascript function below to allow the box to be clickable:

function slideLeft1(){
if(document.getElementById('box1').style.width='70%'){
document.getElementById('box1').style.width='10%';
 }
 else{
 document.getElementById('box1').style.width='70%';
 }
 }

It's working to go from 70% to 20% but not the reverse, so the if statement works but not the else statement. Any ideas??

if() needs ==, dunno if typo

daniel
– daniel

2012-12-15 04:34:33 +00:00
Commented Dec 15, 2012 at 4:34 — daniel
– daniel, Commented Dec 15, 2012 at 4:34

senK · Accepted Answer · 2012-12-15 05:30:33Z

2

You are not checking condition instead assigning it use double ==

function slideLeft1(){
if(document.getElementById('box1').style.width == '10%'){
document.getElementById('box1').style.width='70%';
 }
 else{
 document.getElementById('box1').style.width='10%';
 }
 }

edited Dec 15, 2012 at 5:30

answered Dec 15, 2012 at 4:34

senK

2,8021 gold badge30 silver badges38 bronze badges

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

5 Comments

maiamachine Over a year ago

Thank you so much! That worked! (I'm new to JS in case you couldn't tell).

maiamachine Over a year ago

Another question: For some reason I can only get this to work on the second time that I click on the box. The first time, nothing happens. I copied an pasted your code exactly. Any ideas?

senK Over a year ago

Ya man it is because at first in div attribute it doesnt find anything named style tats why i just updated the code now.. to overcome your problem

maiamachine Over a year ago

can't find the updated code. did you update the code above? thanks!

senK Over a year ago

just changed the 70% with 10% and vice versa

Collectives™ on Stack Overflow

Reset CSS property dynamically using JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related