Toggling the visibility of a div using JavaScript

Question

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click?

HTML

    <p>Click the button</p>
    <button onclick="myFunc()">Try it</button>
    <div id="divi">
     Div region
    </div>

CSS

     #divi {
        width: 50%;
        padding: 50px 0;
        text-align: center;
        background-color: #ccc;
        margin-top:20px;
        display:none;
     }

Javascript

       function myFunc() {
        var dv = document.getElementById('divi');
        if (dv.style.display ==='none') {
        dv.style.display = 'block';
        } else {
         dv.style.display = 'none';
         }
         }

Here is the pen: https://codepen.io/animaxf/pen/xdVVbK

javascript html css

Answer 1

Answer №1

This situation arises because the style attribute is technically empty, resulting in style.display being essentially null. Thus, on the first click, it sets display:none;.

To resolve this issue, you can modify the JavaScript as follows:

function myFunc() {
  var dv = document.getElementById('divi');
  if (dv.style.display === 'block') {
    dv.style.display = 'block';
  } else {
    dv.style.display = 'none';
  }
}

By initially checking if it is block, it will function correctly.

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display === 'block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

Answer 2

This situation arises because the style attribute is technically empty, resulting in style.display being essentially null. Thus, on the first click, it sets display:none;.

To resolve this issue, you can modify the JavaScript as follows:

function myFunc() {
  var dv = document.getElementById('divi');
  if (dv.style.display === 'block') {
    dv.style.display = 'block';
  } else {
    dv.style.display = 'none';
  }
}

By initially checking if it is block, it will function correctly.

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display === 'block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

Answer 3

Answer №2

Initially, when you click, it triggers the code to enter the 'else' statement and show the content.

Once that step is completed, you will be in a successful loop.

function displayContent() {
    var division = document.getElementById('divisionID');
    if (division.style.display === 'block') {
        division.style.display = 'none';
    } else {
        division.style.display = 'block';
    }
}

#divisionID {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top: 20px;
    display: none;
}

<body>

<p>Click the button</p>

<button onclick="displayContent()">Try it</button>

<div id="divisionID">
Content within the div
</div>

</body>

Answer 4

Initially, when you click, it triggers the code to enter the 'else' statement and show the content.

Once that step is completed, you will be in a successful loop.

function displayContent() {
    var division = document.getElementById('divisionID');
    if (division.style.display === 'block') {
        division.style.display = 'none';
    } else {
        division.style.display = 'block';
    }
}

#divisionID {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top: 20px;
    display: none;
}

<body>

<p>Click the button</p>

<button onclick="displayContent()">Try it</button>

<div id="divisionID">
Content within the div
</div>

</body>

Answer 5

Answer №3

Include the following code snippet in your HTML:

<div id="hidden-div" style="display:none">

Your div element will initially be hidden from view

Answer 6

Include the following code snippet in your HTML:

<div id="hidden-div" style="display:none">

Your div element will initially be hidden from view

Answer 7

Answer №4

Upon the initial click, no styling is applied (dv.style.display = "") causing dv.style.display!== 'none' to evaluate as true and setting dv.style.display = 'none'.

function myFunc() {
    var dv = document.getElementById('divi');
  
    if (dv.style.display !=='none'&& dv.style.display !=="") {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

Answer 8

Upon the initial click, no styling is applied (dv.style.display = "") causing dv.style.display!== 'none' to evaluate as true and setting dv.style.display = 'none'.

function myFunc() {
    var dv = document.getElementById('divi');
  
    if (dv.style.display !=='none'&& dv.style.display !=="") {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

Answer 9

Answer №5

When you initially click, the display property is not defined. Simply adjust the properties - then it should function correctly.

https://example.com/code123

Answer 10

When you initially click, the display property is not defined. Simply adjust the properties - then it should function correctly.

https://example.com/code123

Answer 11

Answer №6

Upon the first click of the button, the CSS property display has not been set yet. As a result, the click event is checking if dv.style.display !== 'none', when in reality dv.style.display === ''.

To resolve this issue, you can make changes to your code or opt for a more elegant solution by adjusting the CSS. Simply add display: block (or display: none depending on your desired starting state) to the CSS definition of #divi.

Answer 12

Upon the first click of the button, the CSS property display has not been set yet. As a result, the click event is checking if dv.style.display !== 'none', when in reality dv.style.display === ''.

To resolve this issue, you can make changes to your code or opt for a more elegant solution by adjusting the CSS. Simply add display: block (or display: none depending on your desired starting state) to the CSS definition of #divi.

Answer 13

Answer №7

Explanation for why the div is not displaying properly: The issue arises from changing the style of the div without including the display:none attribute within the class element. As a result, the initial state of the div does not have the display attribute until it is later declared as none. To resolve this, include style="display:none; directly on the div rather than specifying it in the CSS file.

Answer 14

Explanation for why the div is not displaying properly: The issue arises from changing the style of the div without including the display:none attribute within the class element. As a result, the initial state of the div does not have the display attribute until it is later declared as none. To resolve this, include style="display:none; directly on the div rather than specifying it in the CSS file.

Answer 15

Answer №8

Upon initial page load, the class is not defined, causing your condition if (dv.style.display !=='none') to evaluate as true and setting the display property to 'none'.

Instead, you should check if the display value is 'block' by using if (dv.style.display =='block').

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display =='block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

Answer 16

Upon initial page load, the class is not defined, causing your condition if (dv.style.display !=='none') to evaluate as true and setting the display property to 'none'.

Instead, you should check if the display value is 'block' by using if (dv.style.display =='block').

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display =='block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

Toggling the visibility of a div using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Update image attributes (such as src, alt, etc.) after a successful AJAX request (and also help me troubleshoot my AJAX

Restrict the number of button clicks to only once every 5 minutes

How can you align a list next to a set of images using HTML and CSS?

Error encountered in Angular10: XHR request for POST failed due to browser blocking HTTP Request to a domain with a similar name

nuxt-auth is experiencing difficulties retrieving token information through the refresh provider

Having trouble getting my JavaScript code to function properly on Firefox browser

Differentiating CSS Styles for Odd and Even Table Elements

Updating data scope in AngularJS using $http request not functioning properly

Excessive calls to the component update in React with Javascript are leading to application crashes

Transferring data between JavaScript and PHP

Unable to retrieve object element in angular

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Troubleshooting an HTML Design Flaw: How to create a 3x3 table with

Using Laravel to retrieve the selected value of a dynamically generated radio button through a for loop in jQuery

Have I got it all wrong with the way Controllers communicate with Services and how I conduct unit testing?

Arranging items to be flush at the base of several columns

Utilizing JSON Data for Dynamically Displaying Database Objects on a Google Map

Adding the text-success class to a Bootstrap 5 table row with zebra striping does not produce any noticeable change

Tips for efficiently utilizing both client-server side rendering and static generation rendering in web development

Creating a custom comparison method between two select dropdowns using the jQuery Validation plugin