title: Building Dual Function buttons
body: <p>I am trying to have two buttons each with similar functions.
  The first function is that when clicked, they  will display a specific menu attributed to them. I.E. 'buttonOne' shows menu one when clicked and 'buttonTwo' shows menu two in place of menu one and vice versa. Only one menu should show at a time and they house the same spot on the screen when displayed.</p>
  
  <p>The second function is to change the color of the button that was last clicked so as to indicate which menu is being shown.  The other button should revert to its unclicked style.</p>
  
  <p>I have been able to figure out how to get the button to change style and in a practice forum, I can get one menu to display and hide with the style change, but have not been able to bring it over to my main code or account for the second button.  Below is a condensed version of the code.  The content in the viewers are anchored to items in the menu.  That is why I want the user to be able to switch visible menus.  I am aware that the second function in this code is not in the script portion.  I expect that it would mirror the function for the first button. So to save space, I left it out.  </p>
  
  <pre><code> &lt;body&gt;
    &lt;section id="main_body"&gt;
      &lt;section id="nav_area"&gt;
        &lt;nav class="viewer_nav" id="menu_one"&gt;
          &lt;ul&gt;
           &lt;li&gt;Item 1 - href'd to view_area_one&lt;/li&gt;
            &lt;li&gt;Item 2 - href'd to view_area_one&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
  
        &lt;nav class="viewer_nav" id="menu_two"&gt;
          &lt;ul&gt;
            &lt;li&gt;Item 3 - href'd to view_area_two&lt;/li&gt;
            &lt;li&gt;Item 4 - href'd to view_area_two&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/section&gt;
  
      &lt;div id="content_area"&gt;
  
  
    &lt;div class="viewer_class" id="view_area_one"&gt;
      &lt;input type= "button" value="Viewer One" id="buttonOne" class="button_style"  onclick="switchViewer()" /&gt;
     &lt;p&gt;Content for menu two will go here and user can jump to a section that is linked in menu_one&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="viewer_class" id="view_area_two"&gt;
     &lt;input type= "button" value="Viewer Two" id="buttonTwo" class="button_style"  onclick="switchViewertwo()" /&gt;
     &lt;p&gt;Content for menu two will go here and user can jump to a section that is linked in menu_two&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> &lt;script&gt;
   function switchViewer() {
    var x = document.getElementById("viewer_two");
    var y = document.getElementById('buttonOne');
    if (x.style.display === "none") {
      x.style.display = "block";
      y.value="Viewer One";
    } else {
      x.style.display = "none";
    }
    return false;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>