JSFiddle - React, Tailwind, and code Playground

by Salustiano Silva

HTML

<div class="content">
    <a href="#" class="prev">anterior</a>
     <div class="representante-info">
        <div id="rep-info" class="texto">
           <ul>
              <li><h2>foo LTDA</h2></li>
              <li>End: Alameda dos Anjos 233, São Caetano do Sul - SP</li>
              <li>Cep: 1234-000</li>
              <li>Fone: (11) 1234-0000</li>
              <li>Site: www.foo.com.br</li>
              <li>E-mail: [email protected]</li>
           </ul>
           <ul class="hidden">
           	<li><h2>FOO LTDA</h2></li>
           	<li>End: Rua do Bosque, 222, São Paulo - SP</li>
           	<li>Cep: 1234-000</li>
           	<li>Fone: (19) 8845-9897</li>
           	<li>Site: www.foo.com.br</li>
           	<li>E-mail: [email protected]</li>
           </ul>
           <ul class="hidden">
           	<li><h2>Jhon Doe</h2></li>
           	<li>Rua Plesk, 400 São paulo - SP</li>
           	<li>Cep: 1234-000</li>
           </ul>
        </div>
     </div>
     <a href="#" class="next">proximo</a>
</div>

CSS

.content {
  width: auto;
  height: 750px;
  margin: 0 auto;
}

.content a.prev,
 a.next {
  float: left;
  display: block;
  width: 31px;
  height: 27px;  
  color: #f26;
  position: relative;
}

.content a.prev {
  background-image: url(../assets/img/setas.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  top: 50px;
  margin: 0 10px 0 0;
}

.content a.next {
  background-image: url(../assets/img/setas.png);
  background-repeat: no-repeat;
  background-position: 0 -27px;
  top: 50px;
  margin: 0 0 0 10px;
}

 .content .representante-mapa {
  width: 850px;
  height: 560px;
}

 .content .representante-info {
  width: 650px;
  height: 134px;
  background-color: #df6225;
  background-image: url(../assets/img/rep-map-info.png);
  background-position: -1% 50%;
  background-repeat: no-repeat;
  margin: 0 auto;
  float: left;
}

.content .representante-info .texto {
  width: 328px;
  height: 100%;
  margin: 0 0 0 60px;
}

.content .representante-info .texto ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 20px;
}

.content .representante-info .texto ul.hidden {
  display: none;
}

.content .representante-info .texto ul li {
  font-family: 'helvetica neue', arial, sans-serif;
  font-size: 14px;
  color: #fff;
}

.content .representante-info .texto ul li h2 {
  font-family: arial, serif;
  text-transform: uppercase;
  font-size: 16px;
  color: #fff;
  padding: 0;
  margin: 0;
}

JavaScript

var $list = $('#rep-info');

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

    var $item = $list.find('ul:not(.hidden)');

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

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

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