title: How to have separate home function for menu that loads divs?
body: <p>I have a menu that is set to hide/show divs in the main body of the page. It functions but I need to have preloaded content inside that main body div. I have it now so when you click the menu items it hides the initial content. </p>
  
  <p>I need the home menu item set to show that main div again as well as hide whatever content is currently showing...</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>// JavaScript Document
      $(document).ready(function () {
          $('.menu').click(function () {
              var $clicked = $(this)
              $('.menu').each(function(){
                  var $menu = $(this);
                  if (!$menu.is($clicked))
                  {
                      $($menu.attr('data-item')).hide();
                          $('#homecontent').hide();
                  }
              });
              $($clicked.attr('data-item')).toggle();
           });
                      $('#home-menu-item').click(function () {
                          $('homecontent').show();
                  });
              window.onresize = function(){
                  var img = document.getElementById('fullsize');
                  img.style.width = "100%";
              };
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   background-color: #151515;
   background: url('media/Shadexbackground_000000.png') no-repeat;
   margin: 0;
   padding: 0;
   background-size: cover;
  }footer {
   height: 2vh;
   text-align: center;
   margin-left: 3vh;
   margin-right: 3vh;
   opacity: 0.5;
  }
  header {
   height: 11vh;
   text-align: center;
   margin: 0;
   padding-top: 10px;
   padding-right: 0px;
   padding-bottom: 2px;
  }
  
  #wrapper {
   color: #FFFFFF;
   height: 100vh;
   width: 100vw;
  }
  #bodycontent {
   opacity: .4;
   height: 75vh;
   text-align: center;
   background-color: #2A2A2A;
   margin-top: 2vh;
   margin-bottom: 5vh;
   margin-left: 3vh;
   margin-right: 3vh;
   overflow-y: auto;
  }
  .logoclass {
   width: 100%;
   height: 90%;
   min-width: 0px;
  
  }
  #topmenu {
   width: 100%;
   height: 10%;
   font-size: 2.5vmin;
   text-align: center;
   word-spacing:  10vw;
  }
  
  
  #logo img {
   border-radius: 0;
   max-width: 100%;
   max-height: 100%;
   height: auto;
      width: auto;
  }
  @font-face {
   font-family: lesterbold;
   src: url(../fonts/lesterbold.woff);
   font-size: medium;
  } 
  @font-face {
   font-family: vipna;
   src: url(../fonts/vipnagorgialla.woff);
  } 
  #topmenu a:link, a:visited {
   color: #E7E7E7;
   border-radius: 0;
   font-family: lesterbold;
   /* [disabled]font-size: 14pt; */
   text-decoration: none;
   font-style: normal;
   font-variant: normal;
   font-weight: lighter;
   text-shadow: 1px 0px 1px rgba(255, 150, 150, 0.82), 0px 0px 1px rgba(150, 255, 150, 0.95), -1px 0px 1px rgba(150, 150, 255, 0.82), 0 0 10px #E7E7E7 , 0 0 15px #E7E7E7;
  }
  
  #topmenu a:hover, a:active {
   color: #FFFFFF;
   border-radius: 0;
   font-family: lesterbold;
   /* [disabled]font-size: 14pt; */
   text-decoration: none;
   font-style: normal;
   font-variant: normal;
   font-weight: lighter;
   text-shadow: 0 0 10px #ffffff , 0 0 15px #ffffff , 0 0 20px #ffffff;
  }#footerleft {
   float: left;
   width: 45vw;
   text-align: left;
   padding-left: 5vm;
  }
  #footerright {
   float: right;
   width: 45vw;
   text-align: right;
   vertical-align: middle;
   margin-left: 5vw;
  }
  #videobox {
   text-align: left;
   color: #FFFFFF;
   font-family: vipna;
   font-style: normal;
   font-variant: normal;
   font-weight: lighter;
   font-size: 2.5vmin;
   width: 50vw;
   max-width: 100%;
   margin-left: 25vw;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--Begin content --&gt;
  &lt;div id="wrapper"&gt;
  &lt;header&gt;
  &lt;div align="center" class="logoclass" id="logo"&gt;&lt;img src="media/logo.png"/&gt;&lt;/div&gt;
  &lt;div id="topmenu"&gt;
  &lt;a href="#" id="home-menu-item" class="menu" data-item="#menu-home"&gt;Home&lt;/a&gt;
  &lt;a href="#" id="videos-menu-item" class="menu" data-item="#menu-videos"&gt;Videos&lt;/a&gt;
  &lt;a href="#" id="follow-menu-item" class="menu" data-item="#menu-follow"&gt;Follow&lt;/a&gt;
  &lt;a href="#" id="contact-menu-item" class="menu" data-item="#menu-contact"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;article&gt;
  &lt;div id="bodycontent"&gt;
  &lt;!--Contact --&gt;
  &lt;div id="menu-contact" style="display: none"&gt;Contact&lt;/div&gt;
  &lt;!--Follow --&gt;
  &lt;div id="menu-follow" style="display: none"&gt;Follow&lt;/div&gt;
  &lt;!--Videos --&gt;
  &lt;div id="menu-videos" style="display: none"&gt;&lt;br /&gt;
  &lt;div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"&gt;&lt;br /&gt;
  &lt;div align="center" id="videobox"&gt;Splash
  &lt;video style="z-index:-1;" width="400" controls&gt;
    &lt;source src="media/videos/splash.mp4" type="video/mp4"&gt;
    &lt;source src="media/videos/splash.ogg" type="video/ogg"&gt;
    Your browser does not support HTML5 video.
  &lt;/video&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Home --&gt;
  &lt;div id="homecontent"&gt;.dfsg5r4y5g4b&lt;/div&gt;
  &lt;/div&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>