JavaScript

How to Show and Hide Content Using JavaScript

Introduction

In web development, there are many scenarios where you might want to show or hide content dynamically based on user interactions. This can be achieved using JavaScript, which allows you to manipulate the Document Object Model (DOM) in real time. In this article, we will walk through a step-by-step guide on how to create a simple yet effective show/hide functionality using HTML, CSS, and JavaScript. We will also discuss the importance of each part of the code and how they work together to achieve the desired result.

HTML Structure

The HTML code defines the structure of the webpage, including the buttons and content sections. Each content section is wrapped in a div with a unique ID to allow for individual control, which will be present in the full code below.

First, let's start with the HTML structure. The HTML code provides the basic structure of the webpage, including the buttons and the content that will be shown or hidden.

<body>
    <div class="container">
        <h1>Show/Hide Example</h1>
        <button class="btn btn-show1" onclick="showContent('content1')">Show Div 1</button>
        <button class="btn btn-show2" onclick="showContent('content2')">Show Div 2</button>
        <button class="btn btn-hide" onclick="hideContent()">Hide</button>      

        <div class="content" id="content1">
            <h2>Div 1 Content</h2>
            <p>This is the content of Div 1.</p>
            <table>

                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>

                <tr>
                    <td>Row 1, Cell 1</td>
                    <td>Row 1, Cell 2</td>
                    <td>Row 1, Cell 3</td>
                </tr>

                <tr>
                    <td>Row 2, Cell 1</td>
                    <td>Row 2, Cell 2</td>
                    <td>Row 2, Cell 3</td>
                </tr>

            </table>
        </div>
       
        <div class="content" id="content2">
            <h2>Div 2 Content</h2>
            <p>This is the content of Div 2.</p>

            <ul>
                <li>Item 1: Detailed description of item 1.</li>
                <li>Item 2: Detailed description of item 2.</li>
                <li>Item 3: Detailed description of item 3.</li>

            </ul>
        </div>
    </div>

</body>

CSS Styling

The CSS code is used to style the HTML elements, making the webpage visually appealing. It includes styles for the container, buttons, and content sections.

JavaScript Code

The JavaScript code is responsible for the dynamic behavior of the webpage. It includes functions to show and hide the content based on user interactions.

Explanation

CSS Styling: The CSS code styles the webpage elements, ensuring a clean and modern look. It includes styles for the container, buttons, and content sections, making the UI visually appealing.

 body {

    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {

    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.content {
    display: none;
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.btn-show1 {
    background-color: #4CAF50;
    color: white;

}

.btn-show2 {
    background-color: #2196F3;
    color: white;
}

.btn-hide {
    background-color: #f44336;
    color: white;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.content p {
    font-size: 18px;
    color: #333;
}

.content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.content table, .content th, .content td {
    border: 1px solid #ddd;
}

.content th, .content td {
    padding: 8px;
    text-align: left;
}

.content th {
    background-color: #f2f2f2;
}

JavaScript Functions

The JavaScript code includes two functions: showContent and hideContent. The showContent function takes a divId parameter, hides all content sections, and then displays the specified content section. The hideContent function hides all content sections.

function showContent(divId) {
    document.getElementById('content1').style.display = 'none';
    document.getElementById('content2').style.display = 'none';
    document.getElementById(divId).style.display = 'block';
}

function hideContent() {

    document.getElementById('content1').style.display = 'none';
    document.getElementById('content2').style.display = 'none';

}

Full Code

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Example</title>
  
  <style>

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {

            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .content {
            display: none;
            margin-top: 20px;
        }

        .btn {

            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .btn-show1 {

            background-color: #4CAF50;
            color: white;
        }

        .btn-show2 {
            background-color: #2196F3;
            color: white;
        }

        .btn-hide {
            background-color: #f44336;
            color: white;
        }

        .content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .content p {
            font-size: 18px;
            color: #333;
        }

        .content table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .content table, .content th, .content td {
            border: 1px solid #ddd;
        }

        .content th, .content td {
            padding: 8px;
            text-align: left;
        }

        .content th {
            background-color: #f2f2f2;
        }

    </style>

</head>

<body>

    <div class="container">
        <h1>Show/Hide Example</h1>
        <button class="btn btn-show1" onclick="showContent('content1')">Show Div 1</button>
        <button class="btn btn-show2" onclick="showContent('content2')">Show Div 2</button>
        <button class="btn btn-hide" onclick="hideContent()">Hide</button>
      
        <div class="content" id="content1">
            <h2>Div 1 Content</h2>
            <p>This is the content of Div 1.</p>

            <table>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>

                <tr>
                    <td>Row 1, Cell 1</td>
                    <td>Row 1, Cell 2</td>
                    <td>Row 1, Cell 3</td>
                </tr>

                <tr>
                    <td>Row 2, Cell 1</td>
                    <td>Row 2, Cell 2</td>
                    <td>Row 2, Cell 3</td>
                </tr>

            </table>
        </div>
       
        <div class="content" id="content2">
            <h2>Div 2 Content</h2>
            <p>This is the content of Div 2.</p>

            <ul>
                <li>Item 1: Detailed description of item 1.</li>
                <li>Item 2: Detailed description of item 2.</li>
                <li>Item 3: Detailed description of item 3.</li>
            </ul>

        </div>
    </div>

    <script>
        function showContent(divId) {
            document.getElementById('content1').style.display = 'none';
            document.getElementById('content2').style.display = 'none';
            document.getElementById(divId).style.display = 'block';
        }

        function hideContent() {
            document.getElementById('content1').style.display = 'none';
            document.getElementById('content2').style.display = 'none';
        }

    </script>
</body>

</html>

Show/Hide Example

Div 1 Content

Div 2 content

Example

Additional JavaScript Commands

Here are some alternative methods and commands for showing and hiding content using JavaScript:

Using style.display

  • Show an element: document.getElementById('elementId').style.display = 'block';
  • Hide an element: document.getElementById('elementId').style.display = 'none';

Using classList to Add/Remove Classes

  • Show an element by adding a class: document.getElementById('elementId').classList.add('visible'); document.getElementById('elementId').classList.remove('hidden');
  • Hide an element by adding a class: document.getElementById('elementId').classList.add('hidden'); document.getElementById('elementId').classList.remove('visible');

Using visibility Property

  • Show an element: document.getElementById('elementId').style.visibility = 'visible';
  • Hide an element: document.getElementById('elementId').style.visibility = 'hidden';

Using opacity Property

  • Show an element: document.getElementById('elementId').style.opacity = '1';
  • Hide an element: document.getElementById('elementId').style.opacity = '0';

Using toggle Method

  • Toggle visibility of an element: document.getElementById('elementId').classList.toggle('hidden');

Advantages of Using JavaScript for Show/Hide Functionality

  1. Interactivity: JavaScript allows for dynamic interactions, enhancing user experience.
  2. Flexibility: You can easily customize the behavior and appearance of elements.
  3. Performance: JavaScript executes on the client side, reducing server load and improving performance.
  4. Compatibility: JavaScript is supported by all modern browsers, ensuring wide accessibility.
  5. Ease of Use: Simple commands and functions make it easy to implement show/hide functionality.

Disadvantages of Using JavaScript for Show/Hide Functionality

  1. Dependency on JavaScript: If JavaScript is disabled in the user's browser, the functionality won't work.
  2. Complexity for Beginners: While basic commands are simple, more complex interactions can be challenging for beginners.
  3. Maintenance: Keeping track of multiple elements and their states can become cumbersome in larger projects.
  4. Performance Issues: Poorly written JavaScript can lead to performance issues, especially with large datasets or complex DOM manipulations.

Conclusion

By combining HTML, CSS, and JavaScript, you can create a dynamic and interactive webpage that allows users to show and hide content based on their interactions. This functionality is useful in various scenarios, such as displaying additional information, creating collapsible sections, and improving the overall user experience. With the provided code and explanations, you should be able to implement and customize this feature for your own projects.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found