How To Make My Menu Show Only One Div At A Time?

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? T

Solution 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

Solution 2:

Here you are a working example http://jsfiddle.net/9owL9u37/

The CSS

.content {
    display: none;
}

jQuery

$('.clickable').on('click', function () {
    $('.content').hide();
    if ($(this).hasClass('clicked')) {
        $(this).removeClass('clicked');
    } else {
        $(this).next().show();
        $(this).addClass('clicked');
    }
});

Solution 3:

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

<a href="#" class="trigger" id="content-1">link1</a>
<div class="show-content-1 hidden">Content 1</div>

<a href="#" class="trigger" id="content-2">link2</a>
<div class="show-content-2 hidden">Content 2</div>

<a href="#" class="trigger" id="content-3">link3</a>
<div class="show-content-3 hidden">Content 3</div>
<!-- remove hidden class from any div to display it when page loads -->