Jquery prev/next navigation with show/hide content for custom calendar

Question

I want to create some prev/next calendar solution by showing/hiding content.

I have this code for navigation (should be flexible by adding more months):

<div class="months">
    <div class="082016">2016 august</div>
    <div class="092016">2016 september</div>
    <div class="102016">2016 october</div>
</div>

And items:

<div class="items">
    <div id="082016">
        <div class="item">August item</div>
        <div class="item">August item</div>
        <div class="item">August item</div>
    </div>
    <div id="092016">
        <div class="item">September item</div>
        <div class="item">September item</div>
        <div class="item">September item</div>
    </div>
    <div id="102016">
        <div class="item">October item</div>
        <div class="item">October item</div>
        <div class="item">October item</div>
    </div>
</div>

What i want to achieve is to having such navigation:

So on arrow click it would show that month id and will change title of navigation. Also i should have no back arrow for first month and no next arrow for lats month.

Thanks in advance for any help!

Answer 1

My proposal for your question is a pure jQuery script:

$(function () {
  var cachedToDivs = $('.months div');

  cachedToDivs.css({'font-weight': 'bold'});
  $('.items > div:lt(' + (cachedToDivs.length - 1) + ')').hide();
  $('.months div:lt(' + (cachedToDivs.length - 1) + ')').hide();


  cachedToDivs.on('click', 'img', function (e) {
    if ($(':animated').length > 0) {
      return; // wait for last animation...
    }
    var index;
    if (e.target.name == 'prev') {
      index = (-1 + $(this).parent().index()) % cachedToDivs.length;
      index = (index < 0) ? cachedToDivs.length - 1: index;
    } else {
      index = (1 + $(this).parent().index()) % cachedToDivs.length;
    }
    cachedToDivs.eq(index).find('img').remove();
    var txt = cachedToDivs.eq(index).text().trim();
    cachedToDivs.eq(index).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + txt + '&nbsp;&nbsp;&nbsp;<img  name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>');
    $(this).parent().hide();
    cachedToDivs.eq(index).show();
    $('.items > div:visible').slideUp('fast', function() {
      $('.items #' + cachedToDivs.eq(index).attr('class')).slideDown('fast');
    })
    if(index == (cachedToDivs.length - 1)) {  // on the last month remove next image
      cachedToDivs.eq(index).find('img[name="next"]').remove();
    }
    if(index == 0) {  // on the first month remove prev image
      cachedToDivs.eq(index).find('img[name="prev"]').remove();
    }
  });
  cachedToDivs.eq((cachedToDivs.length - 1)).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + cachedToDivs.eq(2).text().trim() + '&nbsp;&nbsp;&nbsp;<img  name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>');
  $('.months div:visible img[name="next"]').trigger('click');
});

.months {
  display: inline-block;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="months">
    <div class="082016">2016 august</div>
    <div class="092016">2016 september</div>
    <div class="102016">2016 october</div>
</div>
<div class="items">
    <div id="082016">
        <div class="item">August item</div>
        <div class="item">August item</div>
        <div class="item">August item</div>
    </div>
    <div id="092016">
        <div class="item">September item</div>
        <div class="item">September item</div>
        <div class="item">September item</div>
    </div>
    <div id="102016">
        <div class="item">October item</div>
        <div class="item">October item</div>
        <div class="item">October item</div>
    </div>
</div>