Accessibly rotate content using jQuery

Clicking some button in some container changes the container. Forms are most common example of them, when submitting button turns the whole form into another form or thanks message. Its quite easy to make have a look at demo.

See the Pen Accessibly rotate content by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Initially when I tried it using plain Javascript, what I found was a long complex codes with loops and several function but an easy approach using jQuery is way more better.

  $('.rotate').hide(0);
  $('.rotate:first').show();

Initially hide the container with the above code and make the first one appear. Then using a click function access the parent of the link and check the data attribute.

  if (e.data('target') == 'next') {
      thisParent.next().show(0)
    }else if(e.data('target') == 'prev'){
      thisParent.prev().show(0)
 }

Show the next or previous container of the parent and then hide the current one. Check this below demo of one of the my previous post published on this blog.

See the Pen Sliding Multiple Tabs with Arrow navigation by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.