{"id":64873,"date":"2007-05-14T22:24:00","date_gmt":"2007-05-14T22:24:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/05\/14\/how-can-i-dynamically-hide-and-show-a-control-in-an-hta\/"},"modified":"2007-05-14T22:24:00","modified_gmt":"2007-05-14T22:24:00","slug":"how-can-i-dynamically-hide-and-show-a-control-in-an-hta","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-dynamically-hide-and-show-a-control-in-an-hta\/","title":{"rendered":"How Can I Dynamically Hide and Show a Control in an HTA?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! How can I dynamically hide and show a control in an HTA?

— R L-K<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, R L-K. To tell you the truth, we\u2019re a little distracted today. Admittedly, we\u2019re a little distracted pretty much every<\/I> day. However, today is different: today the Scripting Guy who writes this column in sitting on a powder keg that threatens to destroy the Scripting Guys forever!<\/P>\n

We\u2019ve probably never mentioned this before, but the Scripting Guy who writes this column has a son who\u2019s wrapping up his junior year in high school. (From here on we\u2019ll call him \u2026 let\u2019s see .. how about \u201cThe Scripting Son\u201d?) In the past year he\u2019s gotten a steady stream of letters from colleges and universities from around the world, all of them encouraging him to explore the wonderful educational opportunities they have to offer. Drexel University, Pepperdine, Linfield College, Old Dominion: you name it, and there\u2019s a good chance he\u2019s heard from them.<\/P>\n

Now that was all well and good, at least until yesterday, when he received a letter from \u2013 cue the ominous music \u2013 the University of Cambridge in Cambridge, England!<\/P>\n\n<\/THEAD>\n\n\n
\n

Interesting note<\/B>. In the year 2009 the University of Cambridge will be celebrating its 800th<\/SUP> anniversary. Although this has not been confirmed, we have reason to believe that Scripting Guy Peter Costantini \u2013 who was a member of the first graduating class at Cambridge \u2013 will be asked to deliver the commencement address.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

So what\u2019s wrong with the University of Cambridge? Nothing. Well, except for this: Cambridge and Oxford University are bitter rivals. And that\u2019s a problem, because Scripting Guy Dean Tsaltas is currently pursuing a Master\u2019s degree in computer science at Oxford. If the Scripting Son enrolls at Cambridge while Dean is still enrolled at Oxford, well, we shudder to think of what might happen.<\/P>\n\n<\/THEAD>\n\n\n
\n

Note<\/B>. If you\u2019re thinking, \u201cOxford University? Never heard of it; is that even an accredited college?\u201d then you must work for the Microsoft department that initially turned down Dean\u2019s request for tuition reimbursement, not believing that there is<\/I> such a place as Oxford University.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

You can just imagine the pressure we\u2019re under; the tension is so thick in Scripting Guys headquarters that we could cut it with a knife. (Or we could if they\u2019d actually allow us to have<\/I> knives.) But still, duty calls, and as a graduate of the University of Washington (go Huskies!) the Scripting Guy who writes this column knows that, when the going gets tough, the tough show you how to dynamically hide and show a control in an HTA:<\/P>

<SCRIPT Language=”VBScript”>\n    Sub ToggleButton\n        If HereThere.style.visibility=”hidden” Then\n            HereThere.style.visibility=”visible”\n        Else\n            HereThere.style.visibility=”hidden”\n        End If\n    End Sub\n<\/SCRIPT><\/p>\n
<input type=”button” value=”Button” name=”HereThere”><P>\n<input type=”button” value=”Click to Hide\/Show Button” onClick=”ToggleButton”>\n<\/PRE>\n
What we have here is a very simple little HTA. (Yes, yes, we know: at either Oxford or Cambridge they\u2019d create super-complicated HTAs. But remember, the Scripting Guy who writes this column graduated from an American<\/I> university.) The body of our HTA contains two buttons. One (cleverly labeled Button<\/I>) is the control we\u2019re going to hide and show; the other (labeled Click to Hide\/Show Button<\/I>) is the button we\u2019ll click any time we want to hide or show the other button. The HTML tagging for the two buttons looks like this:<\/P>
<input type=”button” value=”Button” name=”HereThere”><P>\n<input type=”button” value=”Click to Hide\/Show Button” onClick=”ToggleButton”>\n<\/PRE>\n
And the HTA itself looks like this:<\/P>\"HTA\" \n
 <\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. Can you copy the preceding graphic and use it as your desktop wallpaper? Sure; help yourself.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
That\u2019s it for the body of the HTA. The only other piece to this scripting puzzle is a subroutine named ToggleButton. Each time we click the Click to Hide\/Show Button<\/I> button we call this subroutine; as you probably have already figured out, that\u2019s what the onClick=”ToggleButton”<\/B> parameter is for:<\/P>
<input type=”button” value=”Click to Hide\/Show Button” onClick=”ToggleButton”>\n<\/PRE>\n
So what does this subroutine do? Nothing. Nothing at all.<\/P>\n
Oh, wait; that\u2019s not true. What it actually<\/I> does is first check to see if the Button<\/I> button (which we gave the name HereThere<\/I>) is visible on screen; that\u2019s done by determining whether the Visibility<\/B> attribute is set to hidden<\/I>:<\/P>
If HereThere.style.visibility=”hidden” Then\n<\/PRE>\n
If the Visibility attribute is<\/I> hidden that means that the button is hidden; therefore we execute this line of code, which changes the value of the Visibility attribute to visible<\/I> and, not coincidentally, causes the button to appear on screen:<\/P>
HereThere.style.visibility=”visible”\n<\/PRE>\n
What if the Visibility attribute isn\u2019t<\/I> equal to hidden? In that case the button must be visible on screen; therefore we change the value of the Visibility attribute and, in turn, hide the button:<\/P>
HereThere.style.visibility=”hidden”\n<\/PRE>\n
Will that really cause the button to disappear from our HTA window? See for yourself:<\/P>\"HTA\" \n

But don\u2019t worry; it\u2019s not gone for good. Just click Click to Hide\/Show Button<\/I> and the button will come back. You could keep clicking away all day long, repeatedly hiding and showing the other button. And we\u2019re not just saying that; that\u2019s pretty much how we\u2019ve spent our morning.<\/P>\n
Of course, you\u2019re not limited to doing this only with buttons. You can also hide (and show) other controls. The one tricky part: unlike buttons, the labels of other controls might not be anchored to the control. Thus you might hide, say, a checkbox yet still have the label left onscreen. Likewise, you might have multiple controls you need to show or hide. In that case, your code could get a bit long, and a tad bit complicated.<\/P>\n
Unless, of course, you put all of those controls in a <SPAN> and then hide and show the <SPAN>:<\/P>
<SCRIPT Language=”VBScript”>\n    Sub ToggleButton\n        If HereThere.style.visibility=”hidden” Then\n            HereThere.style.visibility=”visible”\n        Else\n            HereThere.style.visibility=”hidden”\n        End If\n    End Sub\n<\/SCRIPT><\/p>\n
<span id=HereThere>\n    <INPUT type=”checkbox” ID=”box1″>Option 1\n    <INPUT type=”checkbox” ID=”box2″>Option 2\n    <INPUT type=”checkbox” ID=”box3″>Option 3\n    <INPUT type=”checkbox” ID=”box4″>Option 4\n<\/span>\n<p>\n<input type=”button” value=”Click to Hide\/Show Button” onClick=”ToggleButton”>\n<\/PRE>\n
Give that a try and you\u2019ll see what we mean.<\/P>\n
As for the Scripting Guys, now that we think about it this whole Oxford-Cambridge thing is probably \u201cmuch ado about nothing.\u201d (To quote William Shakespeare, who attended King Edward VI Grammar School in Stratford.) After all, what do you think the odds are that the Scripting Guy who writes this column is going to pay to send his son to the University of Cambridge in Cambridge, England? A snowball\u2019s chance in where? Exactly.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! How can I dynamically hide and show a control in an HTA?— R L-K Hey, R L-K. To tell you the truth, we\u2019re a little distracted today. Admittedly, we\u2019re a little distracted pretty much every day. However, today is different: today the Scripting Guy who writes this column in sitting on a […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-64873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! How can I dynamically hide and show a control in an HTA?— R L-K Hey, R L-K. To tell you the truth, we\u2019re a little distracted today. Admittedly, we\u2019re a little distracted pretty much every day. However, today is different: today the Scripting Guy who writes this column in sitting on a […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=64873"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=64873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=64873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=64873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}