I'm trying to implement a zoom button that uses getElementById to increase the width

<span tslbutton (click)="zoomIn()"> <i class="fa fa-search-plus" aria-hidden="true"></i></span>

zoomIn() {
    if (document.getElementById("left_pane").style.width == "25%") {
      document.getElementById("left_pane").style.width = "47%"
    }
    else if (document.getElementById("left_pane").style.width == "47%") {
      document.getElementById("left_pane").style.width = "100%"
      document.getElementById("left_pane").style.marginRight = "0"
      document.getElementById("left_pane").style.marginLeft = "0"
    } else {
      document.getElementById("left_pane").style.width = "25%"
      document.getElementById("left_pane").style.marginRight = "285px"
      document.getElementById("left_pane").style.marginLeft = "222px"
    }
  }

This code here displays a magnifying glass, then upon clicking it it will increase the size of my left pane on the screen.

Only issue here is that I have to click the magnifying glass image twice in order for it to zoom in. Why is this happening? And is there a way to make it zoom in on the first click? Is there a more elegant way to make this work?