JavaScript show and hide elements on click
<p>Please excuse my ignorance, I have no idea what I'm doing, but I'm trying.</p>

<p>I attempted to figure it out by searching, but it has only yielded a functional result in jQuery. Since this is such a small section, I think it would be better to just use plain vanilla JavaScript instead of loading the entire jQuery library.</p>

<p>Does anyone know how/if I can accomplish the same functionality below, <em>but with only normal <strong>JavaScript</em></strong>? Basically what I am trying to do is when "butt1" is clicked, the unordered list "links" will become hidden and the div "box1" will be shown:</p>

<pre><code>&lt;html&gt; 
&lt;head&gt; 
   &lt;title&gt;qwerty&lt;/title&gt; 
   &lt;style type="text/css"&gt; 
      .box1 {background: red;}
   &lt;/style&gt; 
   &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt; 
   &lt;script type="text/javascript"&gt; 
      $("#butt1").live("click", show_box1);
      function show_box1(event) {
          $("#links").css("display", "none");
          $(".box1").css("display", "inline");            
      }
  &lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
   &lt;ul id="links"&gt; 
      &lt;li id="butt1"&gt;&lt;a href="#"&gt;blah&lt;/a&gt;&lt;/li&gt; 
      &lt;li id="butt2"&gt;&lt;a href="#"&gt;blah&lt;/a&gt;&lt;/li&gt; 
      &lt;li id="butt3"&gt;&lt;a href="#"&gt;blah&lt;/a&gt;&lt;/li&gt; 
   &lt;/ul&gt; 
   &lt;div class="box1" style="display: none;"&gt;You clicked butt1!&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt;
</code></pre>

<p>Here's a link to the above as a working example: <a href="http://jsbin.com/umitef/4/" rel="nofollow">http://jsbin.com/umitef/4/</a> -- this is the functionality I want replicated.</p>

<p>My extended thanks to anyone who takes a moment.. :-)</p>
