This would be a great deal easier if I could use jQuery, but I'm trying to avoid doing so for a few reasons. Meanwhile, I've gotten some of the script to work - and I'm attempting to add the function to toggle the button text with the state of the 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>

That script works, and nicely, with my current button:

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

Trying to have the text toggle with the state of the div visibility. Most answers I've seen are using jQuery, and the context I'm putting the script into makes forms a non-option.

This would be a great deal easier if I could use jQuery, but I'm trying to avoid doing so for a few reasons. Meanwhile, I've gotten some of the script to work - and I'm attempting to add the function to toggle the button text with the state of the 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>

That script works, and nicely, with my current button:

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

Trying to have the text toggle with the state of the div visibility. Most answers I've seen are using jQuery, and the context I'm putting the script into makes forms a non-option.

• javascript
• html
• button
• toggle

• The real trick is trying to do this will plain ol' javascript. The context I'm using this with is going to be very simple and has to be modular, so I want to keep it as self-contained as I can. – Kyle Commented Dec 29, 2012 at 21:54

2 Answers 2

See if this helps:

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';
};

Demo: http://jsbin./emikux/1/edit

My JS is a little rusty and I can't check this right now, but I think somthing like this will do what you want:

<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>

Fixed the spacing show /script would show.