How to make my menu show only one div at a time?

Question

This works fine, but when one div content is shown, if I click to show another div content, it overrides the first div. I want to show only one div at a time. Can anyone help me

Answer 1

Thats very similar to a question that I submit earlier. Maybe this would help

http://codepen.io/mehmet/pen/BkJIu

jQuery

$('.trigger').on("click", function(e) {
  e.preventDefault();
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.show-' + $id).attr('class').replace('hidden', '');

  $('div[class*=show]').not($class).fadeOut().promise().done( function(){
    $('.show-' + $id).fadeIn();
  });
});

CSS

.hidden {display: none;}  
.trigger {display:block}

HTML

link1
Content 1

link2
Content 2

link3
Content 3