title: filter HTML list with JS
body: <p>I am not very familiar with HTML and JavaScript, so my learning is based on reverse engineering code.</p>
  <p>The code I'm using filters a table based on a keyword modified I can also add this code to a button and filter on a keyword I've added a very primitive toggle which works (well toggles anyways). However, I can't get the table to change all the styles back to <code>style=&quot;Display = &quot;&quot;;</code> at least I can't make them reappear?</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>var myTog = 0;
  
  function myFunction() {
    var ul, li, a, i, txtValue;
  
    if (myTog == 0) {
      myTog = 1;
  
      ul = document.getElementById("myUL");
      li = ul.getElementsByTagName("li");
  
      for (i = 0; i &lt; li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.indexOf("Cindy") &gt; -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
  
    } else {
      alert("test if toggel works");
  
      // ================
      // Trouble Section:
      // ================
  
      for (i = 0; i &lt; li.length; i++) {
        li[i].style.display = "";
      }
  
      // ===============
  
      myTog = 0;
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="myUL"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Adele&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Agnes&lt;/a&gt;&lt;/li&gt;
  
    &lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;
  
    &lt;li&gt;&lt;a href="#"&gt;Calvin&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Christina&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Cindy&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;button type="button" onclick="myFunction()"&gt;Click Me!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>