Showing a Hidden DIV Anchor in HTML

Next Video:
Displaying the HTML Code of a Photo in Tumblr....5

Showing a hidden DIV anchor in HTML isn't nearly as complicated as you might think it is. Find out about showing a hidden DIV anchor in HTML with help from a programmer and web designer in this free video clip.

Part of the Video Series: Web Design & WordPress
Promoted By Zergnet


Video Transcript

Hi, my name is Omar, and I'm a programmer. Today, I'm going to show you how to show a hidden DIV anchor in HTML. So, go ahead and fire up your favorite HTML editor. I'm using Text Edit for convenience sake. But you can use Notepad or whatever one you want, Notepad plus plus is a good one. So as you can see, I have some boilerplate HTML code set up. I have three DIVs and three anchors on those DIVs. I also have the spans, and I'm going to use those spans to show the DIV anchors. As you can see under the styles, all the anchors are hidden. So What you do is you use Java script. I wrote a quick Java script function here. And if you can see all it does is takes the object and changes the visibility style to visible instead of hidden. Now how do you fire that function? On the span you want to add the code onClick equals and you put in your Java script function. In our case, is show anchor, and we are going to pass along the ID for the anchor that we want to show. So for instance for the first one we'll pass on document dot get element by ID. And the ID is A underscore one. And once you do that, that's all you need to do. And you repeat that for the next two, and we'll just change the IDs. And when you click on that span, the corresponding DIV will appear visible. I'm Omar, and I just showed you how to show a hidden DIV using HTML. Thank you for watching.


Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!