JSFiddle - React, Tailwind, and code Playground

by bambam007

HTML

<a id="scrollup" href="#">up</a>  
<div id="news">
   <ul>
      <li>item One</li>
      <li>item Two</li>
      <li>item Three</li>
      <li>item Four</li>
      <li>item Five</li>
      <li>item Six</li>
      <li>item Seven</li>
   </ul>
</div>
<a id="scrolldown" href="#">down</a>

CSS

#news {height:96px;width:200px;overflow:hidden;}
#news li {display:block; height: 30px;width:180px;border:1px solid #666;}

JavaScript

$(document).ready(function () {
        
        
        $('#scrolldown').click(function(event) {
                event.preventDefault();         // cancel click through
                // get current list item
                var currli = $('#news li:visible');
                // get next list item
                var nextli = currli.next();
                // if nextli length is 0, make it equal to first li
                if (nextli.length == 0) {
                    nextli = currli.siblings('#news li:first');
                }
                currli.hide();
                nextli.show();
        });
        $('#scrollup').click(function(event) {
                event.preventDefault();         // cancel click through
                // get current list item
                var currli = $('#news li:visible');
                // get next list item
                var prevli = currli.prev();
                // if nextli length is 0, make it equal to first li
                if (prevli.length == 0) {
                    prevli = currli.siblings('#news li:last');
                }
                currli.hide();
                prevli.show();
        });
        $('#news li:nth-child(1)').show();
    });