Hiding and showing div blocks in html

Learn hiding and showing div blocks in html with practical examples, diagrams, and best practices. Covers javascript, html development techniques with visual explanations.
Tags:
Categories:

Mastering HTML Div Visibility: Show and Hide with JavaScript

Hero image for Hiding and showing div blocks in html

Learn various techniques to dynamically show and hide <div> elements using JavaScript, enhancing user interaction and page responsiveness.

Dynamically showing and hiding <div> elements is a fundamental technique in modern web development. It allows you to create interactive user interfaces, display conditional content, and improve the overall user experience without full page reloads. This article will guide you through different JavaScript methods to achieve this, from simple CSS manipulation to more advanced approaches.

The Basics: Toggling Display Property

The most straightforward way to hide or show a <div> is by manipulating its CSS display property. Setting display: none; will hide the element and remove it from the document flow, meaning it won't take up any space. Setting it back to display: block; (or inline-block, flex, grid, etc., depending on its original display type) will make it visible again.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Display Example</title>
    <style>
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid blue;
            padding: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <button onclick="toggleDisplay()">Toggle Div</button>
    <div id="myDiv">This is a div that will be toggled.</div>

    <script>
        function toggleDisplay() {
            const myDiv = document.getElementById('myDiv');
            if (myDiv.style.display === 'none') {
                myDiv.style.display = 'block'; // Or 'flex', 'grid', etc.
            } else {
                myDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

HTML and JavaScript for toggling div visibility using display property.

Using CSS Classes for Better Control

Directly manipulating element.style.display can become cumbersome for more complex scenarios or when you want to apply multiple CSS properties for hiding/showing. A more maintainable approach is to define CSS classes for hidden and visible states and then toggle these classes using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Class Example</title>
    <style>
        #myDivWithClass {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            border: 1px solid green;
            padding: 10px;
            margin-top: 20px;
            transition: opacity 0.3s ease-in-out;
        }
        .hidden {
            display: none;
            /* Or for visual hiding without removing from flow: */
            /* visibility: hidden; */
            /* opacity: 0; */
        }
    </style>
</head>
<body>
    <button onclick="toggleClass()">Toggle Div with Class</button>
    <div id="myDivWithClass">This div uses a CSS class.</div>

    <script>
        function toggleClass() {
            const myDiv = document.getElementById('myDivWithClass');
            myDiv.classList.toggle('hidden');
        }
    </script>
</body>
</html>

Toggling div visibility by adding/removing a CSS class.

flowchart TD
    A[User Clicks Button]
    B{Is Div Visible?}
    C[Add 'hidden' Class]
    D[Remove 'hidden' Class]
    E[Div Becomes Hidden]
    F[Div Becomes Visible]

    A --> B
    B -- Yes --> C
    C --> E
    B -- No --> D
    D --> F

Flowchart illustrating the logic of toggling a CSS class for visibility.

Advanced Techniques: Accessibility and Animations

While display: none; is effective, it can sometimes impact accessibility if not handled carefully, as screen readers might not announce content that is hidden this way. For content that should be visually hidden but still accessible, or for smooth transitions, other CSS properties like visibility and opacity combined with CSS transitions or JavaScript animations are preferred.

Visibility Toggle

Visibility Toggle
This div uses `visibility` and `opacity`.
<script>
    function toggleVisibility() {
        const myDiv = document.getElementById('myDivVisibility');
        myDiv.classList.toggle('invisible');
    }
</script>

ARIA Attributes

ARIA Toggle
This div uses ARIA attributes for accessibility. Its content is still available to screen readers when visually hidden.
<script>
    function toggleAria() {
        const myDiv = document.getElementById('myDivAria');
        const button = document.querySelector('[aria-controls="myDivAria"]');
        const isHidden = myDiv.getAttribute('aria-hidden') === 'true';

        myDiv.setAttribute('aria-hidden', !isHidden);
        button.setAttribute('aria-expanded', isHidden);

        // Optionally, also toggle visual display if needed
        if (isHidden) {
            myDiv.style.display = 'block';
        } else {
            myDiv.style.display = 'none';
        }
    }
</script>