title: JavaScript show and hide elements on click
body: <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="noreferrer">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>