jQuery addClass example

Change class name on click in jQuery

HTML

<div>
  <button class="maximize">maximize</button>
</div>

<div id="leitor">
  <div class="leitor_top">
  Text of the top
  </div>
  <img src="https://dummyimage.com/400x900/c70202/fff">
  
  <button class="up">Up to Text of the top</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}



.fullScreened {
    overflow-y: scroll;
    overflow-x: hidden;
    height:400px
}

.leitor_top
{
  color:blue;

}

.up
{
    position: relative;
    color:#fff;
    background:#000;
    padding:10px 10px
}

JavaScript

$(".maximize").on('click', function() {
			if(IsFullScreenCurrently())
				GoOutFullscreen();
			else
				GoInFullscreen($("#leitor").get(0));
		});
    
    

		$(".up").on('click', function() {
			$('html,body').animate({scrollTop:$('.leitor_top').offset().top}, 150);
		});
    

		function IsFullScreenCurrently() {
			var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
			
			// If no element is in full-screen
			if(full_screen_element === null)
				return false;
			else
				return true;
		}
    
    		/* Get into full screen */
		function GoInFullscreen(element) {
			if(element.requestFullscreen)
				element.requestFullscreen();
			else if(element.mozRequestFullScreen)
				element.mozRequestFullScreen();
			else if(element.webkitRequestFullscreen)
				element.webkitRequestFullscreen();
			else if(element.msRequestFullscreen)
				element.msRequestFullscreen();
			
			$("#leitor").addClass("fullScreened");
		}

		/* Get out of full screen */
		function GoOutFullscreen() {
			if(document.exitFullscreen)
				document.exitFullscreen();
			else if(document.mozCancelFullScreen)
				document.mozCancelFullScreen();
			else if(document.webkitExitFullscreen)
				document.webkitExitFullscreen();
			else if(document.msExitFullscreen)
				document.msExitFullscreen();
			
			$("#leitor").removeClass("fullScreened");
		}