Switch Between Desktop And Mobile View

Switch Between Desktop and Mobile View
Mobile View Desktop View
Desktop Version

This content is optimized for desktop users.
Mobile Version

This content is optimized for mobile users.
HTML Code:
         <div>
  <title>Switch Between Desktop and Mobile View</title>
  <style>
    /* Basic styling for desktop and mobile content */
    #desktop-content,
    #mobile-content {
      display: none;
      padding: 20px;
      border: 1px solid #ddd;
      margin: 20px 0;
    }

    /* Styling for the switch button */
    .switch-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }

    .switch-label {
      margin-right: 10px;
      font-size: 18px;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    input:checked+.slider {
      background-color: #2196F3;
    }

    input:checked+.slider:before {
      transform: translateX(26px);
    }
  </style>

  <h1><br /></h1>

  <!--Switch Button-->
  <div class="switch-container">
    <span class="switch-label">Mobile View</span>
    <label class="switch">
      <input id="viewSwitch" type="checkbox" />
      <span class="slider"></span>
    </label>
    <span class="switch-label">Desktop View</span>
  </div>

  <!--Desktop Content-->
  <div id="desktop-content">
    <h2>Desktop Version</h2>
    <p>This content is optimized for desktop users.</p>
  </div>

  <!--Mobile Content-->
  <div id="mobile-content">
    <h2>Mobile Version</h2>
    <p>This content is optimized for mobile users.</p>
  </div>

  <script>
    // JavaScript to handle the switch between desktop and mobile views
    document.getElementById('viewSwitch').addEventListener('change', function() {
      if (this.checked) {
        document.getElementById('desktop-content').style.display = 'block';
        document.getElementById('mobile-content').style.display = 'none';
      } else {
        document.getElementById('desktop-content').style.display = 'none';
        document.getElementById('mobile-content').style.display = 'block';
      }
    });

    // Initial state based on default unchecked state (Mobile view)
    document.getElementById('mobile-content').style.display = 'block';
  </script>

</div>