Changing multiple divs based on arrows

Question

I have created an input section for users to write their own work. I have multiple divs to the side of this and I'd like to change the divs from a left and right arrow that can be clicked.

$(document).ready(function() {
  $('.menubody:nth-child(1)').show('slow');
  $('.menubody:nth-child(1)').hide('slow');
  $('.fa-caret-right').on({
    click: function() {
      var i = $('.menubody:visible').index();
      var len = $('.menubody').length;
      var next;
      if (i >= 0) {
        if (i == len - 1) {
          next = $('.menubody:eq(0)');
        } else {
          next = $('.menubody:eq(' + (i + 1) + ')');
        }
        $('.menubody:visible').hide();
        $(next).show();
      }
    }
  });
});

EDIT:

I have a working example (see fiddle ) that changes and changes the content when 'right' is pressed.

How do I make it so the 'left' div moves the content to previous? And add more than one content area to change?

For an example layout of the usage (not jQuery working), please see here .

Answer 1

I think you should use the nth-child() jQuery selector here. Simply increment the value of n every time the button right is clicked and decrease the value of n every time the left arrow is clicked.

$('#left-arrow').on('click', function(){
  var i++; 
  $('main-div:nth-child(i-1)').hide();
  $('main-div:nth-child(i)').show();
})   

Here's a link to read more : W3 Schools :nth-child() selector

Answer 2

Use jQuery's .prev() and .next() . If they return a collection of zero length, use .last() and .first() instead to cycle through your content (not sure that you needed this).

 $(function() { $('.tabs-container div').not(':first-child').hide(); $('#tabs li a').click(function() { var $clickedLink = $(this), $visible = $('.tabs-container div:visible'); $visible.each(function(){ var $this = $(this), $parentContainer = $this.parents('.tabs-container').eq(0), $toShow; if( $clickedLink.is('.prev') ){ $toShow = $this.prev('div').length ? $this.prev('div') : $('div', $parentContainer).last(); } else { $toShow = $this.next('div').length ? $this.next('div') : $('div', $parentContainer).first(); } $this.hide(); $toShow.show(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul id="tabs"> <li><a href="#" class="prev">Left Arrrow</a> </li> <li><a href="#" class="next">Right Arrow</a> </li> </ul> <div class="tabs-container"> <div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div> <div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div> <div id="content3">Content for link 3. Should display only when Link 3 is clicked.</div> <div id="content4">Content for link 4. Should display only when Link 4 is clicked.</div> </div> <p>Unrelated text is here. Text in this area is static and should display at all times.</p> <div class="tabs-container"> <div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div> <div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div> </div> <p>More unrelated text</p> <div class="tabs-container"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> </div>