Search jQuery

jQuery Forum

Referencing the next div after the one clicked.

in Getting Started • 4 years ago

Hi,

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.

<script>
$( document.body ).click(function () {
if ( $( this ).next("div").is( ":hidden" ) ) {
$( this ).next( "div" ).slideDown( "fast" );
} else {
$( this ).next( "div" ).hide();
}
});
</script>

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

Replies(1)

watusiware

Re: Referencing the next div after the one clicked.

4 years ago

this in your code is the <body> element, which, of course, doesn't have a "next".

Can you change the HTML?

You need a way to select the summary divs only. Can you give them a CSS class of e.g. "summary". It would probably also be helpful to give the detail divs some common class - e.g. "detail".

Forget about giving each div a unique ID! This is almost always a bad idea, and seldom serves a useful purpose.

<div class='summary'>lorem ipsum</div>
<div class'detail'>ipsum lorem</div>
<div class='summary'>blah blah</div>
....

$(document).on('click', '.summary', function(event){
var $summary = $(this); // the summary that was clicked on
var $detail = $summary.next();
// Here, "do something" with $summary and/or $detail
});

If you need more help, a concrete example that we can try is more useful. Use jsFiddle. Make it the minimum needed to show the problem. e.g. you only need to show TWO summaries and TWO details, and they can contain minimal, dummy content.

Response title

Attachments

jQuery Forum

Referencing the next div after the one clicked.

Replies(1)

Re: Referencing the next div after the one clicked.

Statistics

Tags

Actions