<center>
<div id="myDiv">
<p id="mp1">пункт 1</p>
<p id="mp2">пункт 2</p>
<p id="mp3">пункт 3</p>
<p id="mp4">пункт 4</p>
<p id="mp5">пункт 5</p>
</div>
</center>
<script>
let state = 0;

document.addEventListener('keydown', function(event) {

let element_1 = document.getElementById("mp1");
let element_2 = document.getElementById("mp2");
let element_3 = document.getElementById("mp3");
let element_4 = document.getElementById("mp4");
let element_5 = document.getElementById("mp5");

if (event.code == 'ArrowUp') {
state--;
if (state < 1 ) state = 1;
if (state == 1){
element_1.innerHTML = ">>>>>пункт 1";
element_2.innerHTML = "пункт 2";
}
if (state == 2){
element_2.innerHTML = ">>>>>пункт 2";
element_3.innerHTML = "пункт 3";
}
if (state == 3){
element_3.innerHTML = ">>>>>пункт 3";
element_4.innerHTML = "пункт 4";
}
if (state == 4){
element_4.innerHTML = ">>>>>пункт 4";
element_5.innerHTML = "пункт 5";
}

}
if (event.code == 'ArrowDown') {
state++;
if (state > 5 ) state = 5;

if (state == 1){
element_1.innerHTML = ">>>>>пункт 1";
}
if (state == 2){
element_1.innerHTML = "пункт 1";
element_2.innerHTML = ">>>>>пункт 2";
}
if (state == 3){
element_2.innerHTML = "пункт 2";
element_3.innerHTML = ">>>>>пункт 3";
}

if (state == 4){
element_3.innerHTML = "пункт 3";
element_4.innerHTML = ">>>>>пункт 4";
}

if (state == 5){
element_4.innerHTML = "пункт 4";
element_5.innerHTML = ">>>>>пункт 5";
}
    
}
});

</script>