JSFiddle - React, Tailwind, and code Playground

by Abhineet Vispute

HTML

<button type="button" id="toggle_btn">
Toggle Viewport
</button>
<span id="span">Desktop View</span>
<hr />
<section class="iframe_holder">
  <iframe src="https://getbootstrap.com/" id="dup_viewPort"></iframe>
</section>

CSS

.iframe_holder {
  height: 600px;
}

#dup_viewPort {
  width: 100%;
  position: relative;
  height: 100%;
  border: 0;
}

JavaScript

var isToggled = false;
$('#toggle_btn').click(function() {
  if (!isToggled) {
    $('#dup_viewPort').animate({
      width: '375px'
    }, function() {
      isToggled = true;
      $('#span').text('Mobile View');
    });
  } else {
    $('#dup_viewPort').animate({
      width: '100%'
    }, function() {
      isToggled = false;
      $('#span').text('Desktop View');
    });
  }
})