How To Hide Two Div With The Same Name But In Different Location Without Knowingt The Div Name?

I have a perl script that will create a html report with two rows(one on the right and one on the left). The perl script will create multiple div with a name of block[#] example, b

Solution 1:

May be tomething like this:

$(document).ready(function() {
    $("h3").click(function() {
        $(this).closest(".shared-parent").find(".block").toggle();
    });
});

It will work if "h3" element have shared parent (".shared-parent") with ".block" element, what we have to toggle

Solution 2:

You'll have to make sure the two divs(that contain the block#'s) have similar structures.

Then you can try something like this:

DEMO

var parentClass = $(this).parent().attr('class');
$('.'+parentClass).hide();

Edit: This fixes the problem pointed out by Metagrapher. Keep in mind though, this is not the best way of doing it, you'd be better off giving your blocks custom attributes to prevent any confusion(duplicating their id's would do the trick, but I wouldn't recommend it. Not really a 'good practice')

DEMO2