jQuery slideToggle only working on one div, and not others

Question

I have a simple tab navigation system set up, and I wanted to code it to be cleaner and more modular.

I made a JSFiddle for you to try it out.

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);

});

Basically, when you click "Entry" it slide toggles properly,

But when you click Search, it doesn't slide. This is has been driving me crazy. Any help is greatly appreciated.

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

Thank you. Nick

Answer 1

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

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

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

        $(choice).slideToggle(300);


    });