## Given the following html [html]

<a href="#" id="older">Older</a> <a href="#" id="newer">Newer</a>
<div id="foo_1" style="display: none">...</div>
<div id="foo_4" style="display: none">...</div>
<div id="foo_8" style="display: visible">...</div>
<div id="foo_11" style="display: none">...</div>
<div id="foo_57" style="display: none">...</div>

## Goal: [javascript]
// I want to hide the currently visible div, and show the previous or the next div,
// depending on the click
// I currently have this working code

  $('a#older').live('click', function() {
    var div = $(this).parent().children('div:visible:first');
    var next = $(div).next('div:hidden');
    if(next.length != 0) {
      next.show();
    } else {
      $(this).parent().children('div:hidden:first').show();
    }
    $(div).hide();
    return false;
  });

  $('a#newer').live('click', function() {
    var div = $(this).parent().children('div:visible:first')
    var prev = $(div).prev('div:hidden');
    if(prev.length != 0) {
      prev.show();
    } else {
      $(this).parent().children('div:hidden:last').show();
    }
    $(div).hide();
    return false;
  });


## [plain_text]
I wondered if there is a better way in jquery.  Any takers?