If your problem is in the code in jQuery, you should have the same question!

HTML problem

You have a problem with HTML, the id of your element that involves the various lists contains the # more character:

<div id="#rep-info" class="texto">

Should be:

<div id="rep-info" class="texto">

Cycle navigation with jQuery

In order to navigate "in a circle" through the various lists, you have to walk to the next element, but check if the current element is the last element, so you can go back to the first element, thus creating loop wanted. The same applies if you are using the reverse navigation.

Example running on JSFiddle

var $list = $('#rep-info'); // elemento que contém as ULs

$('.prev, .next').on("click", function(e) {
    e.preventDefault();

    var $item = $list.find('ul:not(.hidden)'); // apanha quem está visivel

    $item.addClass('hidden'); // esconde todos

    if ($(this).hasClass('next')) { // andar para o próximo
        if ($item.is(':last-child')) { // se for a última UL
            $list.find('ul:first-child').removeClass('hidden');
        } else {
            $item.next().removeClass('hidden');
        }
    } else { // andar para o anterior
        if ($item.is(':first-child')) { // se for a primeira UL
            $list.find('ul:last-child').removeClass('hidden');
        } else {
            $item.prev().removeClass('hidden');
        }
    }
});

Here's another alternative, using only the hidden class as suggested:

$('.next, .prev').on('click', function (event) {
    event.preventDefault();
    trocar($(this).hasClass('next')); // chama a função passando true ou false consoante seja o botao next ou prev
});

function trocar(index) {
    var ul = $('ul');   // por em cache todos os ul
    var visivel;        // iniciar a variavel que vou usar para saber qual está visivel, ie: não hidden
    ul.each(function (i) { // um ciclo para verificar todos os ul
        if (!$(this).hasClass('hidden')) {  // no caso de não ter a classe
            if (!index && i == 0) {         // no caso de prev e ser o primeiro elemento
                visivel = ul.length - 1;    // dar o index do ultimo elemento à variavel "visivel"
            } else if (index && i == ul.length - 1) { // no caso de proximo e de ser o ultimo elemento
                visivel = 0;  // voltar ao principio
            } else {
                visivel = i + (index ? 1 : -1); // casos intermédios
            }
        }
    })
    ul.addClass('hidden'); // esconder todos
    ul.eq(visivel).removeClass('hidden'); // não esconder o escolhido como visivel
};

Example

In the example is an improved version of the code. Compressed by Zuul ™

You can, of course, do this by using jquery and also the .next() however you will have to check if there is a next / previous element before leaving doing what you have to do, and also changed some things in HTML, in case the code would be this:

$('.next').click(function(){
    var el = $('.active');
    if (el.next().length > 0){
        el.addClass('hidden');
        el.next().removeClass('hidden');
        el.next().addClass('active');
        el.removeClass('active');
    }
});

$('.prev').click(function(){
    var el = $('.active');
    if (el.prev().length > 0){
        el.addClass('hidden');
        el.prev().removeClass('hidden');
        el.prev().addClass('active');
        el.removeClass('active');
    }
});

And about HTML, you have to put .prev() by default, that is, you have to leave one of <ul class=active> with class <ul> when loading page.

Example running in JSFiddle