A simple JavaScript to toggle page elements Feb 16. 0713
No rocket science here but I thought I’d blog this for my own future reference. Just a handy little script to have about.
function toggle(elementID){
var target1 = document.getElementById(elementID)
if (target1.style.display == 'none') {
target1.style.display = 'block'
} else {
target1.style.display = 'none'
}
}
Just give the element you want to ‘toggle’ on and off an ID and then pass that to this script.
<a href="javascript: toggle('track_list_2');">Show/Hide</a>
That’s all. :)
Hey thanks, really useful.
toogle js code very goods;
Nathan, that’s a great little tip. Thanks for pointing that out, I wasn’t aware that table display could get funky when set to display: block. :)
Neat, I hadn’t seen jQuery before. Thanks for the pointer Matthew.
@Nathan, that’s a great little tip. Thanks for pointing that out, I wasn’t aware that table display could get funky when set to display: block. :)
You could make this slightly more versatile by setting the style to target1.style.display = ‘’ (empty). When left empty, the element will inherit the default display value for that element. Div becomes block, span becomes inline, and tables (which can be funky in cross-browser situations) will display correctly. If you set a table to display:block, it will look messed up in some browsers but not in others.
@Andrew, that should be corrected now. Thanks for the heads up RE the typo.
Aye, cheers Nathan, works like a charm.
Thanks – just what i was looking for.
Though there is a typo in line 4 – it should read ” target1.style.display = ‘block’ ”
I’m not being picky – You already knew that!
Neat, I hadn’t seen jQuery before. Thanks for the pointer Matthew.
hello nathan! could you please out a demo or example? I dont understand completely how must I use it, thankssss regardss flor
They are incredible. Please accumulate it up… accept a nice day.
montreal massage parlor
Hi,
could you please help me to toggle a href link based on session alive condition.I mean i want a link to goto somepage.jsp if session!=null or empty else someotherpage.jsp
I want javascript for the above problem.
$(this).toggle();
Three cheers for jQuery! ;)