Show/hide 'div' using JavaScript

Extending functionality and clever hacks

Dealing with varying display values

Use the getComputedStyle method to cater to elements with display values that are neither 'none' nor 'block':

function toggleDiv() {
  let x = document.getElementById('myDiv');
  let style = window.getComputedStyle(x);
  x.style.display = (style.display == 'none') ? '' : 'none';
  /* Hide and seek level: Advanced! */
}


Here, the element reverts to its original display style from the CSS stylesheet when it's not 'none'.

CSS is here to save the day

Get back inline to default CSS by removing the style.display property:

x.style.display = '';


Handing back control to CSS, rather than specifying 'block', assists with responsive designs.

Kicking it up a notch with custom-display

For extra control, pass the desired display property as an argument:

function showDiv(displayValue = 'block') {
  let x = document.getElementById('myDiv');
  x.style.display = displayValue;
  /* You may call it control freak! */
}


Stylin' with CSS classes

Toggle visibility with classes:

.hidden { display: none; }
.visible { display: block; } /* they see me rollin' ... */


Toggle these classes in JavaScript for clean visual presentation:

function toggleDiv() {
  let x = document.getElementById('myDiv');
  x.classList.toggle('hidden');
  /* Now you see me, now you don't! */
}


Emphasizing style over syntax!

Keyboard warriors unite

Use Event Listeners instead of inline onclick events; cleaner HTML, anyone?

document.getElementById('toggleButton').addEventListener('click', toggleDiv);
/* I've got my listeners on! */


Cut the jibber-jabber with jQuery

A little sprinkle of jQuery eases and simplifies:

$('#toggleButton').click(function() {
  $('#myDiv').toggle();
  /* Hide-n-seek Champion! */
});


Pitfalls and workarounds

Naturally, dealing with non-standard display values

When a div uses display values other than 'block', like 'flex' or 'grid', modify the toggle function:

function toggleDiv() {
  let x = document.getElementById("myDiv");
  let currentDisplay = getComputedStyle(x).display;
  x.style.display = (currentDisplay !== 'none') ? 'none' : x.dataset.originalDisplay || 'block';
  /* Embracing individuality of divs! */
}


Remember to store the initial display value using data attributes for consistency:

<div id="myDiv" data-original-display="flex">Flexible content</div>


Treating your users with style (transitions)

Use CSS transitions or JavaScript animations for smoother and more appealing visibility toggles.

Multiple elements? No problem!

Ensure your toggling function addresses the correct div when dealing with multiple elements. Maintain unique identifiers and validate your selectors:

function toggleDiv(divId) {
  var x = document.getElementById(divId);
  // switch visibility 
}
