Jquery, div with two classes hide one show the other - conflict?

Question

Sorry if this was answered in a previous thread, i couldn't find one.

I have 4 sections: Section1, Section2, Section3, Section4

There are classes for each section, so I am hiding and showing based on the section. The problem is some classes need to be showin in Section1 and Section2.

<div class="section1 section2">
blah blah
</div>

$('a.homeLink').click(function(){
  $('.section1').show();
  $('.section2, .section3, .section4').hide();
  return false;
});

As you see in this case I have a div in two sections, but as i thought would happen it remains hidden due to hiding class section2

work arounds or solutions??

thanks

Answer 1

Well, if section1 always takes precedence over section2, just change the order of the calls:

$('.section2, .section3, .section4').hide();
$('.section1').show();

If it's not that simple, you'll need to tell us more about what the requirements are.

Answer 2

I recommend rethinking your CSS schema....or re-ordering your JavaScript events. There is a natural cascade to both CSS and script events that needs to be thought through in your schema. The more you fight against this natural cascade, the more confusing your CSS and JavaScript will be.

Answer 3

You could add a generic section class and then filter on the "instance class" (eg. section1):

<div class="section section1 section2">
blah blah
</div>

<div class="section section3 section4">
blah blah
</div>

$('a.homeLink').click(function(){
  var sections = $('.section');
  $('section1', sections).show();
  sections.not('.section1').hide();
  return false;
});