Скройтесь и Шоу то же отделение, использующее JQuery

У ваших ссылок и div есть только самые слабые крючки, на которые можно повесить такое поведение. Возможно, вы действительно хотите связать ссылки с соответствующими div по порядковому номеру, но если нет, то можно начать с добавления некоторых значимых id s. Итак:

<div id="linkarea">
    <a href="#" id="link-1">Content 1</a>
    <a href="#" id="link-2">Content 2</a>
</div>

, а затем

<div id="contentarea">
    <div id="c-1">content #1</div>
    <div id="c-2">content #2</div>
</div>

Чтобы заставить его работать:

$('div#linkarea a').click( function(ev){
    ev.preventDefault(); // suppress natural click
    var idx = this.id.split('-')[1]; // grab the link "number"
    $('div#contentarea div[id=c-'+idx+']') // find respective div
        .show() // show it
        .siblings() // get its siblings
        .hide(); // and hide them
    });
});

Вот рабочий скрипт .

Я бы подошел к этому несколько иначе.

Вместо того, чтобы включать ссылки в HTML, сгенерируйте их с помощью javascript. Таким образом, если у кого-то отключен JS, он не увидит бесполезные ссылки.

<div title="Content 1">content #1</div>
<div title="Content 2">content #2</div>
<div title="Content 3">content #3</div>

Затем JS:

var $divs = $('div'); // or whatever selector is appropriate, maybe classes are needed?
var $linkDiv = $("<div></div>").insertBefore($divs);

$divs.each(function(index) {
    var $t = $(this);
    $("<a></a>", { href: '#', text: this.title })
        .click(function(e) {
            e.preventDefault();
            $t.toggle('slow');
        })
        .appendTo($linkDiv)
    ;
    this.removeAttribute('title');  // to avoid ugly hover tooltips
    if (index > 0) $t.hide();
});

Попробуйте .toggle() вместе с .hide()

http://api.jquery.com/toggle/

http://api.jquery.com/hide/

На этих страницах есть примеры, которые охватывают то, что вы хотите сделать.