jqueryで別のリンクをクリックしたときにその時点で表示されている要素を非表示にしたい

現在作成しているウェブページでサイドバーのリンクをクリックした際、fadeToggleで非表示になっている要素をフェードイン、もう一度クリックしたらフェードアウトさせる関数を実装したのですが、
他のリンクをクリックしたときにその時点で表示している要素をフェードアウトさせるにはどうすればいいでしょうか。
ご提示よろしくお願いいたします。

JAVASCRIPT
1$("#sidebar li a").click(function(e){
2	e.preventDefault();
3	$($(this).attr("href")).fadeToggle();
4});

HTML
1<ul id="sidebar">
2	<li><a href="#hogebox">hoge</a></li>
3	<li><a href="#hugabox">huga</a></li>
4</ul>
5
6<article id="hogebox">
7</article>
8<article id="hugabox">
9</article>

行動規範の内容に同意します

回答1件

ベストアンサー

このように行うのはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .box {
8            display: none;
9        }
10    </style>
11</head>
12<body>
13<ul id="sidebar">
14    <li><a href="#hogebox">hoge</a></li>
15    <li><a href="#hugabox">huga</a></li>
16</ul>
17<article id="hogebox" class="box">
18    a
19</article>
20<article id="hugabox" class="box">
21    b
22</article>
23<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
24<script>
25    $("#sidebar li a").click(function (e) {
26        e.preventDefault();
27        $(".box:not(" + $(this).attr("href") + ")").fadeOut();
28        $($(this).attr("href")).fadeToggle();
29    });
30</script>
31</body>
32</html>