CODEWITHSUNDEEP
jqueryhtml
hkalan2007
hkalan2007

Reputation: 65

One div changes several others

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();
                        });
                    });
                });
            });
        });
    });
});
});

Upvotes: 0

Views: 54

Answers (1)

Gibron
Gibron

Reputation: 1369

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.

Upvotes: 1

Related Questions