Question

I’m trying to have a few divs control the change and to hide or show other divs.

Been reading a lot, but it is not assisting me. I have wrote a lot to make it work, but there has to be an easier way as query is “write less, do more”. Here is what I have.

$(window).load(function () {
   $('#left2, #left3, #left4, #left5, #left6, #left7, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic5, #header-pic6, #headerpic7').hide(function () {       
   $('#right-01').click(function () {
   $('#coin-slider, #header-pic, #header-pic3, #header-pic4, #header-pic5, #header-pic6, #headerpic7, #left, #left3, #left4, #left5, #left6, #left7').hide();
   $('#left2, #header-pic2').show();
 $('#right-02').click(function () {
 $('#coin-slider, #header-pic, #header-pic2, #header-pic4, #header-pic5, #header-pic6, #header-pic7, #left, #left2, #left4, #left5, #left6, #left7').hide();
 $('#left3, #header-pic3').show();
   $('#right-03').click(function () {
   $('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic5, #header-pic6, #header-pic7, #left, #left2, #left3, #left5, #left6, #left7').hide();
   $('#left4, #header-pic4').show();
 $('#right-04').click(function () {
 $('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic6, #header-pic7, #left, #left2, #left3, #left4, #left6, #left7').hide();
 $('#left5, #header-pic5').show();
   $('#right-05').click(function () {
   $('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic5, #header-pic7, #left, #left2, #left3, #left4, #left5, #left7').hide();
   $('#left6, #header-pic6').show();
  $('#right-06').click(function () {
  $('#coin-slider, #header-pic, #header-pic2, #header-pic3, #header-pic4, #header-pic5, #header-pic6, #left, #left2, #left3, #left4, #left5, #left6').hide();
  $('#left7, #header-pic7').show();
                        });
                    });
                });
            });
        });
    });
});
});

Answer 1

Honestly not sure if this answers your question as I am not sure what you want to do less of.

Your example shows an unneeded amount of elements being selected by ID. Structure your markup using CSS classes. Then use jQuery to select elements by class instead of ID.