11 Vote

JavaScript: Show and hide HTML area by clicking a link

Tutorial by Stefan Trost | Last update on 2021-04-30 | Created on 2018-01-03

If we have a lot of information and text on a single website, one idea of design management is to offer areas that you can open and close for the sake of clarity. In other words, we have different headings or topics, and when you click on one of them, it opens up some text or other content that is otherwise invisible. If you click on the headline again, the text closes again.

One possible application is, for example, pages with frequent questions (FAQ sections). Such a page can have the individual questions listed and you get the answers when you click on one of the questions.

In this tutorial I want to show you how you can create such a page.

The JavaScript Code

First, we need the Java Script Code. In the following, there is a function to which we can pass the ID of our area and which then takes care of opening or closing the area, depending on whether the area is currently open or closed.

<script type="text/javascript">
  function toggle(id){
    var e = document.getElementById(id);
	
    if (e.style.display == "none"){
       e.style.display = "";
    } else {
       e.style.display = "none";
    }
  }
</script>

We simply add this code to the top of the HEAD section of our web page between <head> and </head>. For example, after the line with the page title. So our function is available on the whole page and can be reused as often as you like.

The expandable HTML Area

Next, we come to the area that is actually supposed to open and close. The pattern is always the following:

<a href="javascript:toggle('containerid')">Show</a>
<div id="containerid" style="display:none">Text</div>

So, on the one hand we have our link and on the other hand a DIV container that can be open or closed. With our link, we call the function with the ID of the container we want to open. In this example, the ID is "containerid". In addition, we added the CSS property "display: none" to our container. This ensures that the area is closed (invisible) when loading the page.

Multiple expandable Areas

If we want to expand and collapse multiple sections, it is important to always assign unique IDs to ensure the link between the link and the container.

<a href="javascript:toggle('q1')">Question 1</a>
<div id="q1" style="display: none">Answer 1</div>

<a href="javascript:toggle('q2')">Question 2</a>
<div id="q2" style="display: none">Answer 2</div>

<a href="javascript:toggle('q3')">Question 3</a>
<div id="q3" style="display: none">Answer 3</div>

Here we have as an example created 3 question blocks with the IDs "q1", "q2" and "q3". Of course, any other ID can be used and of course any other HTML elements can be used instead of a link and a DIV container.

Show one Area - Hide others

For some readers of this tutorial, the question arose whether it is possible to extend this script so that automatically when opening a box all other boxes or the last opened box is closed. Just follow the link, I wrote another tutorial on exactly this topic.

Limitations of this Script

Of course, since we are using a JavaScript function, this script will only work if JavaScript is enabled in the user's browser. If JavaScript is deactivated and we set our areas to invisible, there is no chance for the user to see these areas (unless he looks in the code).

For this reason, you have to think carefully about when this script is useful and when not. A possible workaround is to first make all invisible areas visible and to call a JavaScript function to make them invisible directly after loading. This would make the areas invisible only if a user has also turned on Java Script and is thus able to use the feature.

ReplyPositiveNegative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.