JSFiddle - React, Tailwind, and code Playground

by rwachtler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div class="DocumentList">
  <ul class="list-inline">
    <li class="DocumentItem">
      <a href="">
        <p>Manufracturer</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>Customer 1st</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>Excess</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>Friendly Form</p>
      </a>
    </li>
    <li class="DocumentItem">
      <a href="">
        <p>FREE</p>
      </a>
    </li>
  </ul>
  <span id="arrow">ARROW</span>
</div>

CSS

.list-inline li {
  display: inline-block;
  border: 1px solid pink;
}

.DocumentList {
  overflow-x: visible;
  width: 200px;
  border: 1px solid green;
}

.list-inline {
  white-space: nowrap;
}

#arrow {
  background-color: black;
  color: white;
  padding: 2%;
}

JavaScript

$(window).resize(function() {
  checkSize();
});

function checkSize() {
  var totalElements = ($(".DocumentItem").length) + 1;

}

$('#arrow').click(function() {
  if ($(".DocumentItem").last().offset().left - 50 <= 0) {
    $(".list-inline").animate({
      'margin-left': 0
    });
  } else {
    $(".list-inline").animate({
      'margin-left': '+=-50px'
    });
  }

});


$(document).ready(function() {
  checkSize();
});