Button text will not toggle

I don't know what I'm doing wrong here, I've been reading my JS book and googling and messing with it for a couple hours but I can't for the life of me figure out what I'm doing wrong.

HTML

<button id="sidebarButton" class="sidebarButton" onclick="toggle()"> >> </button>

JS

function toggle() {
      if (document.getElementById("sidebarButton").innerHTML == " >> ") {
        document.getElementById("sidebarButton").innerHTML = " << ";
      } else if (document.getElementById("sidebarButton").innerHTML == " << ") {
        document.getElementById("sidebarButton").innerHTML = " >> ";
      }
    }