Почему мой код js не захватывает значение margin-right из id = "article_toggle"?

Question

function articleToggle() {

  if (document.getElementById('article_toggle').style.marginRight == 0) {
    document.getElementById('article_toggle').style.marginRight = "400";
  } else {
    document.getElementById('article_toggle').style.marginRight = "0";
  }

  alert(toggle);

}

article {
  position: fixed;
  top: 170px;
  right: 0;
  width: 400px;
  bottom: 40px;
  background: #ffffff;
}

#article_toggle {
  margin-right: 0;
}

<article id="article_toggle">

  <div onclick="articleToggle()">
    <a href="#">
      <p class="articlebar_title articlebar_toggle">Article Index</p>
    </a>
  </div>

</article>

У меня есть меню на правой боковой панели с вкладкой с левой стороны.Когда меню закрыто, вкладка должна быть выровнена по правому краю экрана, открывая вкладку, но меню должно быть скрыто.Когда я нажимаю на вкладку, поле справа должно измениться с -400px на 0, меню с прикрепленной вкладкой должно сместиться влево на ширину меню.И когда я снова нажимаю на вкладку, поле справа должно измениться от 0 до -400 пикселей, закрывая меню.

Итак, где я ошибаюсь в своем коде?Я не хочу использовать jquery.

Спасибо.

Answer 1

 function articleToggle() {
    if (parseFloat(document.getElementById('article_toggle').style.marginRight) == 0)
    {
        document.getElementById('article_toggle').style.marginRight = "50px";
    }
    else
    {
        document.getElementById('article_toggle').style.marginRight = "0";
    }

    }

  article {
    position: fixed;
    top: 50px;
    right: 0;
    width: 400px;
    bottom: 40px;
    background: #ffffff;
    }

    #article_toggle {
        margin-right: 0;
    }

 <article id="article_toggle">

        <div onclick="articleToggle()"><a href="#"><p class="articlebar_title articlebar_toggle">Article Index</p></a>
        </div>

    </article>