Javascript切換按鈕，可更改div可見性並切換按鈕文本

Question

如果我可以使用jQuery，這會容易得多，但是出於某些原因，我試圖避免這樣做。 同時，我已經使用了一些腳本-並且嘗試添加該功能以將按鈕文本切換為div狀態。

<script type="text/javascript">
function toggleMe(a){
    var e = document.getElementById(a);
    if(!e) return true;
    if(e.style.display == "none") {
        e.style.display = "block"
    } else {
        e.style.display = "none"
    }
    return true;
}
</script>

該腳本可以很好地與我當前的按鈕一起使用：

<input type="button" onclick="return toggleMe('para0')" value="Expanse"><br> 
<div id="para0">TEST TEXT</div>

嘗試使文本與div可見性狀態切換。 我見過的大多數答案都在使用jQuery，而我將腳本放入make的上下文是不可選擇的。

Answer 1

看看是否有幫助：

HTML：

<button id="toggle">Toggle</button>
<div id="text">Lorem ipsum dolor sit amet.</div>

JavaScript的：

var button = document.getElementById('toggle'),
    text = document.getElementById('text');

button.onclick = function() {
  var isHidden = text.style.display == 'none';
  text.style.display = isHidden ? 'block' : 'none';
};

演示： http ： //jsbin.com/emikux/1/edit

Answer 2

我的JS有點生銹，我現在無法檢查，但是我認為這樣的事情可以滿足您的要求：

<input type="button" onclick="return toggleMe(this,'para0')" value="Expanse"><br> 
<div id="para0">TEST TEXT</div>

<script type="text/javascript">
    function toggleMe(btn,a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
      e.style.display="block";
      btn.value = "Hide";
   }
   else{
      e.style.display="none";
      btn.value = "Show";
   }
   return true;
  }
  </script>

修復了間距顯示/ script將顯示的問題。