Disappearing Act

Hiding and showing HTML elements with JavaScript - traditional vs modern approaches.

Traditional Approach

W3Schools Example

Disappear Example (See original)

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

Try It

JavaScript can hide HTML elements.

Analysis

✓ Pros

  • Simple and straightforward
  • Code is visible directly in HTML
  • Easy to understand for beginners

✗ Cons

  • Inline onclick mixes HTML and JavaScript
  • Can only hide the element - no way to show it again
  • Hard to modify or extend functionality
  • No separation of concerns
  • Button remains visible after hiding text

Modern Approach

Current Best Practices

Code

<!DOCTYPE html>
<html lang="en">
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" id="hideBtn">Hide</button>
<button type="button" id="showBtn">Show</button>
<button type="button" id="toggleBtn">Toggle</button>

<script>
  const demoText = document.getElementById('demo');
  const hideButton = document.getElementById('hideBtn');
  const showButton = document.getElementById('showBtn');
  const toggleButton = document.getElementById('toggleBtn');
  
  hideButton.addEventListener('click', () => {
    demoText.style.display = 'none';
  });
  
  showButton.addEventListener('click', () => {
    demoText.style.display = 'block';
  });
  
  toggleButton.addEventListener('click', () => {
    if (demoText.style.display === 'none') {
      demoText.style.display = 'block';
    } else {
      demoText.style.display = 'none';
    }
  });
</script>
</body>
</html>

Try It

JavaScript can hide HTML elements.

Analysis

✓ Pros

  • Separates HTML and JavaScript (better organization)
  • Uses const for variables (modern ES6+ syntax)
  • Element references stored once, reused efficiently
  • Can both hide and show elements
  • Toggle function provides smart show/hide behavior
  • Arrow functions provide cleaner syntax
  • Easy to extend with transitions or animations

✗ Cons

  • More code to write initially
  • Requires understanding of event listeners
  • Multiple variable declarations needed

🎯 Key Takeaways

  • Display Property: The style.display property controls element visibility: 'none' hides, 'block' shows (or use original display value)
  • Reversibility: Modern approach allows toggling elements on and off, not just hiding them permanently
  • Conditional Logic: Using if/else statements enables smart toggle functionality
  • Better UX: Multiple buttons give users more control over element visibility
  • Display Values: Different elements have different default display values (block, inline, flex, etc.)
  • Separation of Concerns: Keeping JavaScript separate from HTML makes code easier to maintain
  • Modern Syntax: Using const, addEventListener, and arrow functions follows current best practices

💡 Pro Tip:

For better control with CSS transitions and animations, consider using CSS classes with opacity and visibility properties instead of display. This allows smooth fade-in/fade-out effects!

🚀 Extra for Experts:

Want to see visibility and opacity in action with smooth transitions?