jquery　タブメニュー中身が消える

タブメニューの実装はできたのですが
タブメニューを2回目以降タッチしても中身が現れないという事態に直面しています。

とりあえず　まずはこうなった経緯

(わかりやすくしたサンプルコード)

html
1<div class="tab-menu">
2  <ul>
3    <li id="left" class="selected">左タブ</li>
4    <li id="right">右タブ</li>
5  </ul>
6
7  <div class="contents">
8    <div class="left">
9       <p>お花コンテンツ</p>
10    </div>
11    <div class="right">
12      <p>お魚コンテンツ</p>
13    </div>
14  </div>
15</div>

css
1body{
2  background-color: #f5f5f5;
3}
4
5.tab-menu {
6  width: 500px;
7  margin-left: 60px;
8
9  ul { /* .tab-menuの中のulに対する記述 */
10    margin: 0;
11    padding: 0;
12    margin-top: 50px;
13  }
14
15  li { /* .tab-menuの中のli */
16    display: inline-block;
17    width: 120px;
18    height: 22px;
19    padding: 10px 10px 5px;
20    cursor: pointer;
21    background-color: #AECD6A;
22    border-top-right-radius: 10px;
23    font-size: 14px;
24    color: #fff;
25    text-align: center;
26
27    &.selected {/* .tab-menuの中のliの内、.selectedが与えられているものに対する記述 */
28      background-color: #fff;
29      color: #AECD6A;
30    }
31  }
32}
33
34.contents {
35  background-color: #fff;
36  height: 360px;
37  padding: 20px;
38
39  .right { /* .contentsの中の.rightに対する記述 */
40    display: none; /* 最初、右のコンテンツは非表示にする */
41  }
42}

javascript
1window.addEventListener("load", function() {
2  $("li").on("click", function() {
3    $("li.selected").removeClass("selected");
4    $(this).addClass("selected");
5    $(".contents div").hide(); // 二つの要素を非表示にする
6    $("." + this.id).show(); // クリックされたボタンに対応する要素を表示する
7  });
8});

ここまではしっかりと動作してくれます。

が

html
1<div class="tab-menu">
2  <ul>
3    <li id="left" class="selected">左タブ</li>
4    <li id="right">右タブ</li>
5  </ul>
6
7  <div class="contents">
8    <div class="left">
9      
10     <div class="left-left">
11      <p>お花コンテンツ</p> ←お花コンテンツをdivで囲う
12     </div>
13  
14    </div>
15    <div class="right">
16      <p>お魚コンテンツ</p>
17    </div>
18  </div>
19</div>