Edit in JSFiddle

 function showContent(contentId) {
      var contents = document.getElementsByClassName('content');
      for (var i = 0; i < contents.length; i++) {
        contents[i].style.display = 'none';
      }

      document.getElementById(contentId).style.display = 'block';
    }

 <div class="menu">
    <ul>
      <li onclick="showContent('content1')">Item 1</li>
      <li onclick="showContent('content2')">Item 2</li>
      <li onclick="showContent('content3')">Item 3</li>
    </ul>
  </div>

  <div id="content1" class="content">
    <h2>Content 1</h2>
    <p>This is the content for item 1.</p>
  </div>

  <div id="content2" class="content">
    <h2>Content 2</h2>
    <p>This is the content for item 2.</p>
  </div>

  <div id="content3" class="content">
    <h2>Content 3</h2>
    <p>This is the content for item 3.</p>
  </div>

 .menu {
      display: inline-block;
      width: 200px;
    }

    .menu ul {
      list-style-type: none;
      padding: 0;
    }

    .menu li {
      margin-bottom: 10px;
    }

    .content {
      display: none;
    }

    .selected {
      display: block;
    }