Referencing the next div after the one clicked.

Referencing the next div after the one clicked.


I have some html code to display summary log information inside a table inside a div. Each summary div is followed by a detailed information div that is hidden. The displayed result looks like hundreds of rows in a table. The idea is for someone to click on a div showing summary log data and to have the next hidden div to expand showing detailed log information. I have code that works to slideDown one hidden div if another is clicked but I have to use the id of both divs.

What I would like is to have alternating divs, shown and hidden, and whenever a shown div is clicked the very next div (which is hidden) would be shown.  Ideally clicking on any summary div would hide any hidden div that has been slideDowned before displaying the next div from that clicked.

I have fumbled around with permutations of code as below which did not work.
  1. <script>
    $( document.body ).click(function () {
      if ( $( this ).next("div").is( ":hidden" ) ) {
        $( this ).next( "div" ).slideDown( "fast" );
      } else {
        $( this ).next( "div" ).hide();

Any assistance would be appreciated. I know little javascript and no jquery. TIA