トグルボタンにどのようにフォーカスしていますか？

Question

トグルボタンでフォーカスのオン/オフを処理することに問題があります。ボタンをクリックすると、フォーカスが移動し、コンテナも表示されるので、うまくいきます。ボタンをもう一度クリックすると、コンテナは消えますが、フォーカスはまだ残っています！唯一の解決策は、フォーカスを外すためにボタンの外側をクリックすることです。これは非常に悪いことです。コンテナが表示されたら（ボタンをクリック）フォーカスが表示され、コンテナが消えるとフォーカスがオフになります（ボタンを再度クリックします）。どうすれば修正できますか？ ここをクリックhttps://jsfiddle.net/vo1npqdx/802/ ボタンをクリックするとコンテナが消えますが、青色（フォーカス）が残っているので、ボタンが自動で元の色に戻りません。

CSS：

.ini{ 
color: red; 
border: 2px solid #0000FF; 
} 
.ini:hover, .ini:focus{ 
    color: blue; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175); 
} 

JS：

$("#chi").hide(); 
    $("#hs1").click(function(){ 
     if($('#chi').is(':hidden')){ 
     $("#chi").toggle(500);} 
     else{$("#chi").hide(1000);} 
    }); 

HTML：あなたはこれをしたい

<a class="btn btn-default ini" id="hs1" href="#" role="button">TEST</a> 
<div class="container" id="chi"> 
     <div class="row"> 
      <div class="col-xs-11 col-sm-12 col-md-10 col-lg-8 col-centered"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"><h2>Test</h2><h5>Test</h5></div> 
        <div class="panel-body"> 
         <p>Test</p> 
         </div> 
       </div> 
      </div> 
     </div> 
     </div> 

Answer 1

？ See this fiddle

CSS：

.ini:hover { 
    color: blue; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175); 
} 

.active { 
    color: blue; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175); 
} 

JS：

$("#chi").hide(); 
    $("#hs1").click(function(){ 
     $(this).toggleClass('active'); 
      if($('#chi').is(':hidden')){ 
     $("#chi").toggle(500);} 
     else{$("#chi").hide(1000);} 
    });