Actualmente trabajando en un proyecto donde tengo mucho texto, decidí poner cada párrafo en un panel (DIV), están todos uno encima del otro, cuando haces clic en un div, desaparece (en el CSS, el panel se mueve a -100% de la pantalla) y luego podemos ver el siguiente div, etc. y esto sigue y sigue. pero mi problema es que cuando llego al último div, tengo una página en blanco y no tengo forma de volver, excepto actualizar la página, lo cual no es muy ideal. Entonces, me preguntaba si había un sistema para hacer un ciclo que me haga pasar por todos los divs (data-target=".panel-1",-2,-3-,4, etc.) y en el último trae de vuelta al primer div, por lo que hace una rotación adecuada.

En el ejemplo de abajo solo puse dos paneles, pero hay muchos más. ¿Cuál sería la forma más sencilla de hacer esto? ¡Muchas gracias!

JQuery

$(document).ready(function () { grade(); }); function grade() { $(".grade").on("click", function () { var target = $(this).attr('data-target'); // console.log(1); $(target).addClass('off'); }); }
.panel { position: fixed; top: 0; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: left 0.8s ease-in-out; } .panel.off { left: -100%; } .panel-content { height: 100%; overflow: auto; } .panel-1 { width: 100%; background-color: blue; z-index: 1100; } .panel-2 { width: 100%; background-color: yellow; z-index: 1000; }
<div data-target=".panel-1" class="panel panel-1 grade"> <div class="panel-content"> <h3>What is the concept of the project?</h3><br> <p>Text</p> </div> </div> <div data-target=".panel-2" class="panel panel-2 grade"> <div class="panel-content"> <h3>What is the aim of the project?</h3><br> <p>Text</p> </div> </div>