jQuery slide 1つのdivでしか動作しないトグル

Question

私は単純なタブナビゲーションシステムをセットアップしました。私はそれをよりクリーンでよりモジュラー化するようにコーディングしたかったのです。

私はJSFiddleを試してみました。

HTML：

<div class="col-4"> 
    <nav> 
     <ul> 
      <li id="tab_entry"  value="0" class="navActive myPanelNavLi"><span class="fa fa-plus-circle"></span> Entry</li> 
      <li id="tab_search"  value="1" class="myPanelNavLi">Search</li> 
     </ul> 
    </nav> 

<div class="panelTab_0 myPanelActive lightShadow darkBg roundedBottom"> 
STORAGE ENTRY 
</div> 

<div class="panelTab_1 myPanelActive lightShadow darkBg roundedBottom"> 
STORAGE ENTRY 
</div> 

JS：

//myPanel sliders 
$(".myPanelNavLi").click(function(){ 

    var choiceValue = $(this).attr("value"); 
    var choice = '.panelTab_' + choiceValue; 
    console.log(choice); 

    $(this).parent().parent().next(choice).slideToggle(300); 

}); 

基本的に、あなたはそれは、適切に

をトグルをスライドさせ、 "エントリ" をクリックしてくださいしかし、あなたは検索]をクリックしたときに、それがスライドしません。これは私を夢中にさせている。どんな助けでも大歓迎です。

https://jsfiddle.net/g44xt4m8/3/

ありがとうございます。 ニック

Answer 1

はhttps://jsfiddle.net/g44xt4m8/5/

$(".myPanelNavLi").click(function(){ 

     var choiceValue = $(this).attr("value"); 
     var choice = '.panelTab_' + choiceValue; 

     $(choice).slideToggle(300); 


    });