CODEWITHSUNDEEP
javascripthtmlcss
Matt
Matt

Reputation: 133

How does the following line of JavaScript work?

I came across the following code:

Javascript:

var ElementClicked = document.getElementById(IdClicked);
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';

CSS:

div.hidden{
height: 500px;
}

div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}

The HTML contains two divs: 

<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >

The author calls the JavaScript function with the first div.

I am unable to understand clearly what the JavaScript function is doing. I know what a conditional operator is and how it works.

Can someone explain briefly what the function basically does?

Upvotes: 1

Views: 81

Answers (4)

Rajan Goswami
Rajan Goswami

Reputation: 769

The class of variable ElementClicked is being toggled between 'hidden' and '' using a ternary operator ?.

Upvotes: 1

3pic
3pic

Reputation: 1219

var ElementClicked = document.getElementById(IdClicked);

ElementClicked points/refers to the div with id=IdClicked.

ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';

If ElementClicked owns the class "hidden", nothing appends. Else code adds class 'hidden' to ElementClicked.

Brief, this code add class hidden to ElementClicked. The element with id=IdClicked gets class hidden when the JS code is executed.

Upvotes: 0

DeshDeep Singh
DeshDeep Singh

Reputation: 1843

If i explain it line by line than, 

ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';

this conditional operator checks if is is hidden, n if it is changes its state to ''.

Now,

div.hidden{
height: 500px;
}

div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}

is a css code for beautification and setting it as hidden

and the last one is html code where division is having homepage

<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >

Upvotes: 0

Wander Nauta
Wander Nauta

Reputation: 19615

It toggles the hidden class. If the className was 'hidden', it is now ''. If it was anything else, it is now 'hidden'.

Upvotes: 3

Related Questions