One of the most basic tasks that we usually deal with when designing the interaction experience on a website is to show-hide a DIV with Javascript or in general any HTML element. In this small tutorial we will show you 3 methods, the first one using only Javascript and the second one making use of the, still quite popular, JQuery library.

Content hide
1 Show-ocular DIV with pure Javascript
1.1 Example of hide/display div:
2 Show-hide (toggle) DIV with jQuery
3 Show-hide element when using Bootstrap
4 Conclusion

Show-ocular DIV with pure Javascript

First we will make use of a simple function that checks the state of the HTML element and hides or shows it depending on the result.

<script type="text/javascript">
const mostrar = (elemento) => {
    elemento.style.display = 'block';
}
const ocultar = (elemento) => {
    elemento.style.display = 'none';
}
const showHide = (id) => {
    let div = document.getElementById(id);
    if( window.getComputedStyle(div).display !== 'none' ){
      ocultar(div);
      return false;
    }

    mostrar(div);
}
</script>

Like any other JavaScript code you can place it between <head></head> tags or add it to your external .js file.

This function requires you to specify the ID identifier of the HTML element you want to show-hide and its operation is basically the following:

  1. Gets the DOM object based on the given ID.
  2. Gets the actual current condition of the element’s display property using getComputedStyle.
  3. Any condition other than none means that it is quite possible that element is visible and therefore hides it. Otherwise, it displays it because it implies that it was hidden.

Example of hide/display div:

Suppose we have an HTML element: DIV element with an ID “my-super-content”; similar to the following:

<div id="my-super-content">Here goes my secret content, but not that much.</div>

And we want to display it with link that says: “Show/hide content”. Pretty clear isn’t it? Well, all we have to do is add a call the Javascript function we defined above and the ID of the element we want to affect, in this case “my-super-content”. The result would look something like this:

<a style='cursor: pointer;' onclick="showHide('my-super-content')">
    Show/hide content
</a>

And that’s it. Now when your readers click on that link, the DIV content will be shown or hidden accordingly.

Note: If the initial state of the content is hidden, you need to add the corresponding CSS to hide the element. In this case:

#my-super-content { display:none; }

Which can be added to your external .css file.

Show-hide (toggle) DIV with jQuery

If you are already using the jQuery library on your site, you don’t need to create a new function and use the toggle function, included in jQuery.

For example, let’s suppose that the DIV we are going to change the display has ID: "my-super-content" and the link that displays it has ID: "show-super-content". Then the Javascript would be:

<script>
$( "#show-super-content" ).click( function() {
    $( "#my-super-content" ).toggle();
});
</script>

And the HTML would be as follows:

<a id="show-super-content">Show/hide content.</a>
<div id="my-super-content">Here goes my secret content, but not that much.</div>

The code using JQuery is much more compact but of course, that’s because the actual function is inside the library.

Show-hide element when using Bootstrap

Bootstrap 5 provides a simple way to show and hide large amounts of content using its collapse function.

Step 1: Adding the .collapse class

The first step is to indicate which element will be collapsible by adding the .collapse class to a <div> element. For example:

<div id="demo" class="collapse">
    Lorem ipsum dolor text.... 
</div>

Step 2: Add a button or link to control the collapsible element

Next, you will need to add a button or link that controls the action of showing and hiding the collapsible element. To do this, use the data-bs-toggle="collapse" class on a <button> or <a> element. Then, add the data-bs-target="#id" attribute to connect the button or link to the collapsible element. Here’s an example:

<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>

If you prefer to use a link instead of a button, you can replace the <button> element with an <a> element and use the href attribute instead of data-bs-target. For example:

<a href="#demo" data-bs-toggle="collapse">Collapsible</a>

Step 3: Display the default content

By default, collapsible content will be hidden. If you want to show the default content, you can add the .show class to the collapsible element. Here is an example:

<div id="demo" class="collapse show">
    Lorem ipsum dolor text.... 
</div>

Conclusion

These three solutions are pretty basic but more complex solutions can be built using the same principle. It is also worth mentioning that like many problems in programming, there are several ways to solve the same problem, some solutions are more adequate or complete than others but I would recommend the one you understand best, that way if you require to adapt or improve it you will have probability of success.