モバイルビューで一度に1つのdivを切り替えます

Question

モバイルデバイスのみでアコーディオンメニューとして表示されるフッターがあります。したがって、ul要素は、モバイルデバイスでのみ読み込み時に非表示にする必要があります。一度に1つのセクションだけを開く必要があります。すでに開いているセクションがある場合は、別のセクションがトリガーされると閉じます（http://jsfiddle.net/auUxk/など）。私は以下のコードを持っていますが、現在はグローバルにdivをトリガーしています。

<div class="col-md-3 col-sm-4"> 
    <div class="panel"> 
     <div class="panel-heading"> 
      <h4 class="panel-title">About us</h4> 
     </div> 
     <ul> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
     </ul> 
    </div> 
</div> 
<div class="col-md-3 col-sm-4"> 
    <div class="panel"> 
     <div class="panel-heading"> 
      <h4 class="panel-title">Header</h4> 
     </div> 
     <ul> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
     </ul> 
    </div> 
</div> 

メディアクエリー

@media screen and (max-device-width: 480px) { 
    ul li{ 
    display:none; 
    } 
} 

jQueryの

$(document).ready(function($) { 
    $(".panel-title").click(function() { 
     $("li").slideToggle(500); 
    }); 
}); 

JSFIDDLE：http://jsfiddle.net/auUxk/1115/

Answer 1

WあなただけのCSSを使用しないでください？ 同じ名前のラジオボタンが機能します。

JSFIDDLE：（アニメーション付き）更新http://jsfiddle.net/0Ldpk0vy

JSFIDDLE：http://jsfiddle.net/0Ldpk0vy/1/

ul { 
    display: none; 
} 

[type="radio"] { 
    display: none; 
} 

[type="radio"]:checked + ul { 
    display: block; 
}