title: Changing Hide/Show on click for multiple DIVs
body: <p>first post here. I'm learning jQuery and have made a fixed menu that can pop out on click and also scrolls through DIVs. I'm really trying to improve my jQuery knowledge and I repeated my code a lot to make this work. </p>
  
  <p>I'm looking for help so I could add an infinite amount of DIVs to the menu and it would still click through them. Any help would be greatly appreciated!</p>
  
  <p>Here's a link: <a href="http://jsfiddle.net/arbitel/peLkn/" rel="nofollow">http://jsfiddle.net/arbitel/peLkn/</a> </p>
  
  <pre><code>$(document).ready(function () {
  $('.menubody:nth-child(1)').show('slow');
  $('.menubody:nth-child(1)').hide('slow');
  
  $('.floatingbarbutton').on({
      click: function () {
          if ($('.menubody:nth-child(2)').css('display') == 'block') {
              $('.menubody').hide('slow')
          } else if ($('.menubody:nth-child(3)').css('display') == 'block') {
              $('.menubody').hide('slow')
          } else if ($('.menubody').css('display') == 'none') {
              $('.menubody:nth-child(1)').show('slow')
          } else {
              $('.menubody').hide('slow')
          }
      }
  });
  $('.downarrow').on({
      click: function () {
          if ($('.menubody:nth-child(1)').css('display') == 'block') {
              $('.menubody:nth-child(1)').css('display', 'none')
              $('.menubody:nth-child(2)').css('display', 'block')
          } else if ($('.menubody:nth-child(2)').css('display') == 'block') {
              $('.menubody:nth-child(2)').css('display', 'none')
              $('.menubody:nth-child(3)').css('display', 'block')
          } else if ($('.menubody:nth-child(3)').css('display') == 'block') {
              $('.menubody:nth-child(3)').css('display', 'none')
              $('.menubody:nth-child(1)').css('display', 'block')
          }
  
      }
  });
  });
  </code></pre>