View Full Version : Hiding/Showing div in a single onclick event

Jan 26th, 2010, 08:11 PM

I just installed a javascript library (Walter Zorn drag and drop: http://www.walterzorn.com/dragdrop/dragdrop_e.htm) and one of the properties included is the ability to hide or show divs and images that have been made draggable, using the the following methods:

if (window.dd && dd.elements)dd.elements.divID.show()


if(window.dd && dd.elements) dd.elements.divID.hide()

I'm wondering if I wanted to make a single button that toggled between hiding and showing a DIV....how would I combine the two methods in a single onclick event? They both work perfectly as separate events on different buttons but I cannot figure out how to combine them. Any help would really be appreciated. I'm hope there's some way to do this w/ the "else" statement but I don't know the proper syntax.


Old Pedant
Jan 26th, 2010, 10:35 PM
<input type="button" value="Show"
onclick="if (this.value=='Show') { showDiv(); this.value='Hide';} else { hideDiv(); this.value='Show';}" />

Naturally, you could instead make that simple code into a function instead of having it inline.

If you don't want the button to change values, then you could instead look at the div's style.display property and base the toggling on that.

Or I've even seen people use two colors for the button text. Such as #000000 and #000001, both of which are identically black to the human eye but not to JS, of course.