Как заставить мое меню показывать только один div за раз?

Question

Это прекрасно работает, но когда отображается один div-контент, если я нажму, чтобы показать другое содержимое div, он переопределяет первый div. Я хочу показывать только один div за раз. Может кто-нибудь мне помочь? Заранее спасибо.

HTML:

<div class="clicked"> 
    <p>Block 1</p> 
    </div> 
    <div class="content" style="display:block;"> 
    <p>1Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
     Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. 
     Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 
    </div> 
    <div class="clickable"> 
    <p>Block 2</p> 
    </div> 
    <div class="content"> 
    <p>2Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
     Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. 
     Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 
    </div> 
    <div class="clickable"> 
    <p>Block 3</p> 
    </div> 
    <div class="content"> 
    <p>3Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
     Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. 
     Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 
    </div> 

JQuery:

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

Answer 1

Просто скрыть все .content дивы на мыши перед показом один, который был щелкнули:

$(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

Answer 2

Здесь вы рабочий пример http://jsfiddle.net/9owL9u37/

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'); 
    } 
}); 

Answer 3

То очень похож на вопрос, который я представляю ранее. Может быть, это поможет

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