First, create a simple horizontal menu HTML structure. This is HTML5 structure, but feel free to use the old div/ul combination if your project doesn't use HTML5. Make sure you give each an easy to remember ID so that jQuery can identify each one, and link each to a hash tag (#).

<nav>
  <a id = "one" href="#">One</a>
  <a id = "two"  href="#">Two</a>
  <a id = "three" href="#">Three</a>
  <a id = "four" href="#">Four</a>
</nav>

Below that, create four paragraph tags that you can use as your content. In a production use site, we might want to use AJAX calls to grab the information instead. For the sake of this post however, the paragraphs will be in the structure. To make this easy, we'll give each paragraph tag an ID that starts with its corresponding menu item ID, and adds another letter or phrase at the end of it ("p" in this example).

<div class = "content">
<p id = "onep">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel enim arcu, ac auctor lectus. In pellentesque, ligula vestibulum semper dapibus, neque odio tempus risus, ac malesuada dolor orci a odio. Aenean ac elit metus, hendrerit ultricies arcu. Nulla facilisi.</p>
<p id = "twop">Suspendisse suscipit pharetra ipsum, a ultrices lorem vehicula ac. Vestibulum justo tellus, bibendum ut scelerisque ac, posuere et dolor. Ut est risus, hendrerit congue accumsan vel, elementum sit amet ligula. </p>  
<p id = "threep">Vivamus accumsan, urna vitae fermentum blandit, velit enim suscipit sem, ac faucibus felis sapien pellentesque erat. </p>
<p id = "fourp">In tellus lorem, laoreet ultrices luctus eu, bibendum a purus. In id nibh mauris, at aliquet lacus. Quisque id interdum ipsum. Donec ligula risus, scelerisque ac dignissim quis, volutpat in felis. Phasellus faucibus vulputate nibh, ut dapibus ipsum iaculis non. Donec quis elit enim, ut tristique lorem</p>
</div>

Next we'll add our CSS. This is all style so feel free to play around with it. The movement is handled by jQuery and the HTML IDs, so just use the CSS to make it look good and easy to navigate. I would recommend at least a hover effect so the user knows what to expect. Also consider adding an active class for the tab currently in use.

nav {
  height:50px;
  margin-top:10px;
  margin-left:10px;
  padding:10px 10px 0px 10px;
  min-width:300px;
}

nav a {
  text-decoration:none;
  color:#FFE2B3;
  padding:8px 10px 9px 10px;
  background-color:#1F3642;
  border-radius:10px 10px 0 0;


}

nav a:hover {
  color:#1F3642;
  background-color:#FFE2B3;
}

.content {
 width:40%;
 min-width:200px;
 background-color:#FFE2B3;
 margin-top:-30px;
 margin-left:10px;
 padding:20px;
 border:5px solid #1F3642;
 border-radius:10px;
}

Now in your Javascript file, add these lines of code.

When the page first loads, hide the paragraphs, but show the one corresponding to the first of your menu items. It may be a better choice not to put this inside $(document).ready() because currently the page is loading all of the paragraphs in to view, then removing them once the javascript is read, but again for the sake of this example it's going to stay there.

$('p').hide();
$('#onep').show();

Now add your click function. Don't forget too add a preventDefault() in order to keep the link in the menu from trying to open up a new link. You'll then want to hide the current paragraph shown, then slide down the one that was selected.

$('nav a').click(function(e){
  e.preventDefault();
  $('p').hide();
  $("#" + this.id + "p").slideDown('fast');
});

There you go, a decent starting place for a little tabbed box that can save you space on your website. Try out the CodePen example for yourself below to see how it works.