Show and Hide Text or Images With CSS and JavaScript

Create an application-style experience on your websites

Dynamic HTML (DHTML) allows you to create an application-style experience on your websites, reducing the frequency that entire pages have to be fully loaded. In applications, when you click on something, the application immediately changes to show that specific content or to provide you with your answer.

In contrast, web pages typically have to be reloaded, or an entirely new page has to be loaded. This can make the user experience more disjointed. Your customers have to wait for the first page to load and then wait again for the second page to load, and so on.

A woman sitting at a desk using a laptop with external keyboard and monitor.
Chris Schmidt / E+ / Getty Images

Using to Improve Viewer Experience

Using DHTML, one of the easiest ways to improve this experience is to have div elements toggle on and off to display content when it is requested. A div element defines logical divisions on your webpage. Think of a div as a box that may contain paragraphs, headings, links, images, and even other divs.

What You'll Need

In order to create a div that can be toggled on and off, you need the following:

  • A link to control the div by turning it on and off when clicked.
  • The div to show and hide.
  • CSS to style the div hidden or visible.
  • JavaScript to perform the action.

The Controlling Link

The controlling link is the easiest part. Simply create a link as you would to another page. For now, leave the href attribute blank.

Learn HTML

Place this anywhere on your webpage.

The Div to Show and Hide

Create the div element you want to show and hide. Make sure that your div has a unique id on it. In the example, the unique id is learn HTML.


This is the content column. It starts out blank except for this explanation text. Choose what you want to learn in the navigation column on the left. The text will appear below:



Learn HTML


  • Free HTML Class
  • HTML Tutorial
  • What is XHTML?



The CSS to Show and Hide the Div

Create two classes for your CSS: one to hide the div and the other to show it. You have two options for this: display and visibility.

Display removes the div from the page flow, and visibility just changes how it's seen. Some coders prefer display, but sometimes visibility makes sense, too. For example:

.hidden { display: none; }
.unhidden { display: block; }

If you want to use visibility, then change these classes to:

.hidden { visibility: hidden; }
.unhidden { visibility: visible; }

Add the hidden class to your div so that it starts as hidden on the page:


JavaScript to Make It Work

All this script does is look at the current class set on your div and toggles it to unhidden if it's marked as hidden or vice versa.

This is only a few lines of JavaScript. Place the following in the head of your HTML document (before the 



What this script does, line by line:

  1. Calls the function unhide, and divID is the exact unique ID you want to show or hide.

  2. Sets up a variable item with the value of your div.

  3. Performs a simple browser check; if the browser doesn't support getElementById, this script won't work.

  4. Checks the class on the div. If it's hidden, it changes it to unhidden. Otherwise, it changes it to hidden.

  5. Closes the if statement.

  6. Closes the function.

To make the script work, you need to do one more thing. Go back to your link and add the javascript to the href attribute. Be sure to use the exact unique id that you named your div in this href:

Learn HTML 

Congratulations! You now have a div that will show and hide whenever you click on a link. 

Possible Problems to Watch out For

This script is not fool-proof. There are some situations in which it could cause problems for you:

  1. JavaScript Not Turned On. If your readers don't have JavaScript or it's turned off, this script won't work. The hidden divs remain hidden no matter what your readers do. One way to fix this is to put the hidden divs in a noscript area, but you'll have to play around with that to get them to display correctly.

  2. Too Much Content. This can be a great tool to allow your readers to see only the content they need, but if you put too much inside the hidden divs, it can drastically affect how the page loads. Remember that even though the content isn't displaying, the web browser is still downloading it, so use good sense in how much content you hide.

  3. Customers Don't Understand. Finally, customers may not be accustomed to clicking a link that shows or hides content. Play around with icons (plus signs and arrows work well) or text to explain what will happen to your customers. Another solution is to leave one of the divs open while the others are closed. This can convey the idea to your customers, so they can more quickly figure out how to open the remaining content.

You should always test Dynamic HTML like this with your customers. Once you feel confident that they can understand and use it, this can be a great way to get a large amount of content on your webpages without taking up a lot of visible space.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Show and Hide Text or Images With CSS and JavaScript." ThoughtCo, Jul. 31, 2021, thoughtco.com/show-and-hide-text-3467102. Kyrnin, Jennifer. (2021, July 31). Show and Hide Text or Images With CSS and JavaScript. Retrieved from https://www.thoughtco.com/show-and-hide-text-3467102 Kyrnin, Jennifer. "Show and Hide Text or Images With CSS and JavaScript." ThoughtCo. https://www.thoughtco.com/show-and-hide-text-3467102 (accessed March 19, 2024).