jQuery background colour toggle

[Goodshape]

Anyone familiar with jQuery?

I'm trying to set up an accordion script using h3's to raise/lower their corresponding div and raise all the others. I've got that first bit working without problems.

But.. I'd like to get the background colour on the h3 to change whenever it's div is active, and obviously change back when it's inactive, so I'm using toggle(function()) to switch between a white and a silver background on h3.

This works fine when the user clicks the same h3 to raise and lower the same div, but if they click a different h3, jQuery still expects the original h3 to be 'active' and therefor doesn't switch to silver on the next click.

Here's an example :
http://michael.flanagan.ie/work/snippits/accordion.html

And the code :

jQuery :

  $('div.dropList1> div').hide();
  $('div.dropList1> h3').click(function() {
    $(this).next('div').slideToggle()
    .siblings('div:visible').slideUp();    
  });
  
  $('div.dropList1> h3').toggle(function(){
      $(this).css('background-color','#eaeaea')
      .siblings('h3').css('background-color','white')
    },function(){
      $(this).css('background-color','white');
    });

HTML :

<div class="dropList1">
    <h3>This is the first header.</h3>
    <div>This is the first content.</div>
    <h3>This is the second header.</h3>
    <div>This is the second content.</div>
    <h3>This is the third header.</h3>
    <div>This is the third content.</div>
    <h3>This is the forth header.</h3>
    <div>This is the forth content.</div>
    <h3>This is the fifth header.</h3>
    <div>This is the fifth content.</div>
    <h3>This is the sixth header.</h3>
    <div>This is the sixth content.</div>
</div>

 

[louie]

I am looking at it and now its working now is not.
You need to loop through the h3 tags onclick and change the bg on all (reset) to white, then just set the clicked one to silver.

 

[Goodshape]

You mean like this?

  $('div.dropList1> div').hide();
  $('div.dropList1> h3').click(function() {
    $(this).next('div').slideToggle()
    .siblings('div:visible').slideUp();
    
    $(this).siblings('h3').removeClass('dropListLinkOn');
    $(this).addClass('dropListLinkOn');
  });

(note : I've switched from setting background-color to applying a class to the div.. results are the same).

That's probably the best I've managed to get at the moment -- this will change all other h3's to white and make the clicked one silver.

But the problem now is that contracting a div by pressing it's (silver) h3 does not change the h3 colour back to white. It'll only change back when a different h3 is pressed. Annoying.


Btw, the reason for the "now its working now is not" on the example at the top is that each h3 has it's own toggle instructions. Press once, set bg to silver + set all others to white. Press second time, reset bg to white.

So, if you click h3 number 1 it goes silver... press it again it will go white. But, if you press h3 number 2 in between then number1's background gets switched to white, but the toggle loop still thinks it's selected.. so next press will 'switch back' to white again (and a subsequent click will switch to silver, when it should be white. It's one step behind).


It's a dilly of a pickle to be sure to be sure.

 

[louie]

that doesn't look to me like you are looping through the tags at all.
Why don't you look into onmouseover effect and once expanded highlight that part.

 

[Goodshape]

Sorry, I've only started looking at jQuery in the past week or so -- and I'm fairly new to javascript in general -- so it's entirely likely I'm missing something fairly basic.

I've updated the example -- http://michael.flanagan.ie/work/snippits/accordion.html -- which now uses the code in my last post. As I said, only thing that doesn't work now is getting rid of the silver by clicking on the (same) silver h3.

I'm not sure I understand what you mean by 'looping through' the tags.

Basically, as I understand it, what I want to do is "if background = silver : make everything white... elseif background = white : make this silver + make others white" ...and I suppose I want to do that independent of the slideToggle.


Sorry if I'm being a bit too long-winded here...