JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<script src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.min.js"></script>
<nav>
    <ul>
        <li><a class="showSingle" target="1">Test 1 </a></li>
        <li><a class="showSingle" target="2">Test 2</a></li>
        <li><a class="showSingle" target="3">Test 3</a></li>
    </ul>
</nav>

<div id="div1" class="targetDiv">
      <div class="wrapper">
        <a href="#" class="prev">Prev</a>
        <div class="slider">
          <ul>
              <li><a href="#"><img src="http://placehold.it/200x290" /></a></li>
              <li><a href="#"><img src="http://placehold.it/200x290" /></a></li>
              <li><a href="#"><img src="http://placehold.it/200x290" /></a></li>
              <li><a href="#"><img src="http://placehold.it/200x290" /></a></li>
              <li><a href="#"><img src="http://placehold.it/200x290" /></a></li>
              <li><a href="#"><img src="http://placehold.it/200x290" /></a></li>
              <li><a href="#"><img src="http://placehold.it/200x290" /></a></li>
          </ul>
        </div>
        <a href="#" class="next">Next</a>
      </div>
  </div>

  <div id="div2" class="targetDiv">
      <div class="wrapper">
          <h2>Test 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus ex et neque feugiat, eu vulputate nulla euismod. Suspendisse molestie.</p>
      </div>
  </div>

  <div id="div3" class="targetDiv">
      <div class="wrapper">
          <h2>Test 3</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus ex et neque feugiat, eu vulputate nulla euismod. Suspendisse molestie.</p>
      </div>
  </div>

CSS

.targetDiv {
   display: none;
   width: 100%;
   position: relative;
   background-color: #fff;
    padding-bottom: 40px;
   border-top: 1px solid #dfdfde;
   top:101px;
   z-index: 10000;
   height: 500px;
 }

JavaScript

jQuery(document).ready(function() {
    
    $(".slider").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 5,
        circular: false
    });
    
    $('.showSingle').click(function () {
        var itemid = '#div' + $(this).attr('target'); //id of the element to show/hide.

        //Show the element if nothing is shown.
        if ($('.current').length === 0) {
            $(itemid).slideDown();
            $(itemid).addClass('current');
            //Hide the element if it is shown.
        } else if (itemid == "#" + $('.current').attr('id')) {
            $('.current').slideUp();
            $(itemid).removeClass('current');

            //Otherwise, switch out the current element for the next one sequentially.
        } else {
            $('.current').slideUp(function () {
                $(this).removeClass('current');
                if ($(".targetDiv:animated").length === 0) {
                    $(itemid).slideDown();
                    $(itemid).addClass('current');
                }
            });
        }
    });
    
 });