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

Just hide all the .content divs on click before showing the one that was clicked on:

$(document).ready(function() {
  $('.clicked, .clickable').on('click', function(){
    if ($(this).hasClass('clickable')){
      $('.content').hide(); //Hide all content divs before showing the clicked one
      $(this).next().show();
      $(this).removeClass('clickable').addClass('clicked');
    } else {
      $(this).next().hide();
      $(this).removeClass('clicked').addClass('clickable');
    }
  });
});

JSFiddle