Question

I have been looking for this (and trying by myself) but so far couldn’t make it work.

I have the following that onClick it triggers a toggle function:

function toogle(){
    document.getElementById('id1').style.top = (document.getElementById('id1').style.top != '-130px' ? '-130px' : '0px')}

It works as I wanted but I would also like to make it a bit short, I tried doing

var smalltag = document.getElementById('id1').style.top;
smalltag  = (smalltag  != '-130px' ? '-130px' : '0px')

or

var smalltag = "document.getElementById('id1').style.top";
smalltag  = (smalltag  != '-130px' ? '-130px' : '0px')

but none worked, how can I make it work? Also would like a brief explanation so I can understand it better (if possible).

Forgot to say, I do not intent to use any javascript packages, I am trying to learn the javascript as best as I can and using such packages would be a bad way to do so (meaning no jquery, mootools, etc).

Thank you for yout attention!

Answer 1

You need to have smalltag as reference to DOM element so you need to do like this:

var smalltag = document.getElementById('id1');
smalltag.style.top  = (smalltag.style.top  != '-130px' ? '-130px' : '0px')