JSFiddle - React, Tailwind, and code Playground

by Penguinlay

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="card">
  1
</div>

<div class="card">
  2
</div>

<div class="card">
  3
</div>

<div class="card">
  4
</div>

<div class="card">
  5
</div>

<div class="card">
  6
</div>

<div class="card">
  7
</div>

JavaScript

$(document).ready(function() {
  var totalCard, first, last, current, old;

  first = $(".card:first");
  last = $(".card:last");
  current = first;
  old = first;
  
  $(".card").not(current).hide();
  
  $(document).keydown(function(entry) {
    old = current;

    if(entry.keyCode == 37) {
      if(old == first)
        current = first;
      else
        current = old.prev();
    }

    if(entry.keyCode == 39) {
      if(old == last)
        current = last;
      else
        current = old.next();
    }
    $(".card").hide();
    current.toggle();
  });
});