How to Hide a DIV Tag

Save

In HTML, "<div>" tags are used to separate out blocks of text, giving them unique styles or carefully positioning them on a webpage. Because each DIV tag can be given its own ID, or a class it shares in common with other elements on the page, you can hide them using "CSS" - a versatile specification that allows you to make all kinds of changes to elements on your webpage.

Hiding a Single DIV tag

  • Open your webpage's source code in an HTML editor or Notepad. You need to edit the actual HTML, so a "what-you-see-is-what-you-get," or WYSIWYG, editor isn't sufficient.

  • Scroll down in the webpage's code to the DIV tag you want to hide --- the tag will begin with "<div>" and end with "</div>"; all of the changes you need to make are in the opening tag.

  • Add the following line of code (preserving quotation marks) between "<div" and ">":

    style="display:none;"

    If there are no other attributes (such as "id=" or "class=") in the <div>, it should look read "<div style="display:none;">" and be followed by the textual contents of the tag.

  • Save and close the HTML file; when the page is viewed in a Web browser, the DIV tag will be hidden.

Hiding Multiple DIVs

  • Open the website's source file, which probably ends in ".html"; use a simple text editor, like Notepad on Windows, TextEdit on OSX, or nano on Linux.

  • Locate the document's header section, which begins with "<head>" and ends with "</head>"; immediately after the "<head>" tag, add the following code by copying and pasting it directly into your own webpage's HTML:

    <style type="text/css"> .hide { display:none; } </style>

  • Add the line "class='hide'" between the "<div" and ">" of each div tag you want to hide; if there are no other attributes in the tag, each opening tag will now read simply "<div class='hide'>" --- this references the "hide" CSS class defined in the page header.

  • Save the document and close the HTML editor. When you open the page in a Web browser, every DIV tag with "class='hide'" in its attributes will be hidden to the viewer.

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

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