jQuery Keydown Next, NextAll, Parent Issue

Back again with my nemesis (jQuery/JS)

Basically I have a bunch of divs and within each I have a hidden div which toggles when clicked. This works fine.

<div class="parent">
    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>
</div>

$(".parent").on("click",".article",function(){
    $(".hidden").hide("fast");
    $(this).next('.hidden').slideToggle("fast");
});

I've now decided I want to have the user able to use the cursor to hit next:

$(document).keydown(function(e){
    switch (e.which){
    case 39:
    $(this).parent('.parent').closest('.article-holder').next('.hidden').slideToggle();
    break;
    }
});

This is the part that I can't get to work. I've tried multiple ideas but I just can't get the right cursor to toggle the next hidden div.

Solution

To achieve this you need to use addClass() , removeClass() to the .article-holder element

Use .not($(this).next('.hidden')) to avoid toggle in the next .hidden
Catch the opened article with $(".article-holder.opened") ..Then use .next(".article-holder").find(".article").trigger("click") to trigger the click/toggle action

In the next code I add/removeClass called opened .. press < or >

$(".parent").on("click",".article",function(e){
    e.preventDefault();
    $(".article-holder").removeClass("opened");
    $(".hidden").not($(this).next('.hidden')).hide("fast");
    $(this).closest(".article-holder").addClass("opened")
    $(this).next('.hidden').slideToggle("fast");
});

//I've now decided I want to have the user able to use the cursor to hit next:

$(window).on( "keydown" ,function(e){
    e = e.which || e.keyCode;
    switch (e){
      case 37:
        if($(".article-holder.opened").length){
          if($(".article-holder.opened").index() !== ($(".article-holder").length)){
          $(".article-holder.opened").prev(".article-holder").find(".article").trigger("click");
          }
        }else{
          $(".article-holder:eq("+ ($(".article-holder").length - 1)+") > .article").trigger("click");
        }
        break;
      case 39:
        if($(".article-holder.opened").length){
          if($(".article-holder.opened").index() !== $(".article-holder").length -1){
          $(".article-holder.opened").next(".article-holder").find(".article").trigger("click");
          }
        }else{
          $(".article-holder:eq(0) > .article").trigger("click");
        }
      break;
    }
});

.hidden{
  display : none;
}
.article-holder.opened{
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>

    <div class="article-holder">
        <a href=""class="article">link</a>
        <div class="hidden">hidden content</div>
    </div>
</div>