title: show hide html element and update button text
body: <p>I am not sure if this question has been asked before but I am pretty new to Javascript and I was trying this example: </p>
  
  <p>I am trying to change text of button on show/hide of the fieldSet but button setting button text doesnt work properly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on("load", function() {
    $('.indoor').slideDown();
    $('.outdoor').slideDown();
  });
  
  $(document).ready(function(){
      $(".togOutBtn").click(function(){
          $(".outdoor").toggle(1000);
      });
      $(".togIndorBtn").click(function(){
          $(".indoor").toggle(1000);
      });
  });
  
  function btnToggle(elem, text) {
    if (elem.value == "") {
      elem.value = "Hide " + text;
    }
  
    if (elem.value == "Hide") {
      elem.value = "Show " + text;
      document.getElementById("togOutBtn").innerHTML = elem.value;
    } else {
      elem.value = "Hide " + text;
      document.getElementById("togOutBtn").innerHTML = elem.value;
    }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button onclick="return btnToggle(this, 'Outdoors');" class="togOutBtn" id="togOutBtn"&gt;Hide Outdoors&lt;/button&gt;
  &lt;fieldset class="outdoor" style="display: none;"&gt;
    &lt;legend&gt;Outdoors&lt;/legend&gt;
    Temperature:
    &lt;div id="Outtemp"&gt;&lt;/div&gt;
    Humidity:
    &lt;div id="Outhumid"&gt;&lt;/div&gt;
    Feels lile:
    &lt;div id="OutheadIndex"&gt;&lt;/div&gt;
    &lt;button onclick="waterPlant1()"&gt;Water the Plant&lt;/button&gt;
  &lt;/fieldset&gt;
  &lt;br&gt;
  &lt;button onclick="btnToggle(this, 'Indoors');" class="togIndorBtn"&gt;Hide Indoors&lt;/button&gt;
  &lt;fieldset class="indoor" style="display: none;"&gt;
    &lt;legend&gt;Drawing Room&lt;/legend&gt;
    Temperature: 23* C
    &lt;br&gt;Humidity: 12%
    &lt;br&gt;Feels lile:18* C
    &lt;br&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also the first field set of <em>Outdoors</em> jitters while show hide  compared to the lower one of <em>indoor</em>  goes very smooth.</p>