- Instant help with your JavaScript coding problems

Toggle fullscreen and normal mode with JavaScript

Question:
How to toggle fullscreen and normal mode with JavaScript?
Answer:
const toggleBtn = document.getElementById('toggle-btn');

toggleBtn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}
Description:

To allow site visitors to easily toggle between fullscreen and normal mode you can use the Fullscreen API. The Fullscreen API adds methods to present a specific Element in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.

Share "How to toggle fullscreen and normal mode with JavaScript?"