Javascript code for Showing and Hiding multiple divs with multiple buttons : Hope all is well?

I first off want to say thanks for the Help in advance.

I am new to JavaScript I don't understand it that well and have something real 
urgent to complete.

I used this code: but apparent I have no Idea what I am doing wrong.

<!-- begin snippet: js hide: false console: true -->

<!-- language: lang-html -->

    <!DOCTYPE HTML>
    <html>

    <head>
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
      <title>Untitled 1</title>

      <script type="text/javascript">
        jQuery(function($) {
          var $bgs = $('.menu-toggle');
          $('.menu-item').click(function() {
            var $target = $($(this).data('target')).stop(true).slideToggle();
            $bgs.not($target).filter(':visible').stop(true, true).slideUp();
          })
        })
      </script>

    </head>

    <body>

      <div class="menu-item menu-item-1" data-target=".recovery-bg">
        <a href="#">Recovery</a>
      </div>
      <div class="menu-item menu-item-2" data-target=".forensic-bg">
        <a href="#">Forensics</a>
      </div>
      <div class="menu-item menu-item-3" data-target=".erasure-bg">
        <a href="#">Erasure</a>
      </div>
      <div class="menu-item menu-item-4" data-target=".training-bg">
        <a href="#">Training</a>
      </div>
      <div class="menu-item menu-item-5" data-target=".product-bg">
        <a href="#">Products</a>
      </div>
      <div class="menu-toggle recovery-bg">
        recovery-bg
      </div>
      <div class="menu-toggle forensic-bg">
        forensic-bg
      </div>
      <div class="menu-toggle erasure-bg">
        erasure-bg
      </div>
      <div class="menu-toggle training-bg">
        training-bg
      </div>
      <div class="menu-toggle product-bg">
        product-bg
      </div>

    </body>

    </html>

<!-- end snippet -->

I did get this same code from this website, but like I said no luck what so ever.

Please Help

Thanks