JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<p><a href="#" data-course="t">top</a></p>
<div class="p">
    <p class="active">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<p><a href="#" data-course="b">bottom</a></p>

CSS

p {
    font: 0.7em arial;
    transition: all 0.5s;
}
p.active {
    margin-left: 3em;
}

JavaScript

$('a').on('click', function(){
    var course = $(this).data('course'),
        num_a = $('.p p.active').index(),
        num = $('.p p'),
        num_s = num.length;
    $(num).removeClass('active');
    if (course == 'b') {
        if (num_a != num_s - 1) {
            $(num[num_a + 1]).addClass('active');
        }
        else {
            $(num[0]).addClass('active');
        }
    }
    else {
        console.log(course,num_a,num);
        if (num_a != 0) {
            $(num[num_a - 1]).addClass('active');
        }
        else {
            $(num[num_s - 1]).addClass('active');
        }        
    }
});