Question

I just created script that shows/hides (toggles) block of HTML. There are four buttons that each can toggle its HTML block. When any HTML block is opened, but user has been clicked on other button than that HTML block’s associated button… it hides that HTML block and shows new one.

Here is what I have at the moment:

$('.btn_add_event').click( function() {

    $('.block_link, .block_photos, .block_videos').hide();
    $('.block_event').toggle();

});

$('.btn_add_link').click( function() {

    $('.block_event, .block_photos, .block_videos').hide();
    $('.block_link').toggle();

});

$('.btn_add_photos').click( function() {

    $('.block_event, .block_link, .block_videos').hide();
    $('.block_photos').toggle();

});

$('.btn_add_videos').click( function() {

    $('.block_event, .block_link, .block_photos').hide();
    $('.block_videos').toggle();

});

Any ideas how to reduce code size? Also, this script isn’t very flexible. Imagine to add two new buttons and blocks.

Answer 1

like Sam said, I would use a class that all the blocks share, so you never have to alter that code. Secondly, you can try ‘traversing’ to the closest block, therefore avoiding it’s name. That approach is better than hard coding each specific block, but if the html dom tree changes you will need to refactor. Last, but best, you can pass in the class name desired block as a variable to the function. Below is something you can copy paste that is close to what you started with.

$('.myAddButtonClass').click( function() {

    $('.mySharedBlockClass').filter(':visible').hide();
//find a good way to 'traverse' to your desired block, or name it specifically for now.
//$(this).closest(".mySharedBlockClass").show()  complete guess
    $('.specificBlockClass').show();
});