1 Button to Change Opacity Levels More than twice?

this has been bugging me for over a week now, I seriously need help with this one,

I am basically trying to get one of my navigation buttons to toggle the sub menu, open and closed, but when open change the homepage opacity to 50% and when closed back to 100%

I also need the Button to work in relation to another div, when the div is open and faded out, I need this to change the homepage opacity to 50% also.

Can anyone help please?

I've provided a link with a mockup of what I am trying to achieve, although in this mockup the 'M开发者_C百科otors' div seems to automatically fadeOut, I am trying to get it so when you 're-click' on categories the 'Motors' div will fadeOut, Homepage will fadeIn at 50% opacity.

Mockup of What I'm trying to achieve

PS I am a Jquery Beginner, and Now have no idea what to do.

Thank you.

---

hey guys thanks for answering,

The problem itself isn't actually the motors div automatically fading out, I seem to have that working correctly on my actual site.

The problem lies when the Motors div is open, and when I 're-click' on Categories I want the homepage to fadeIn at 50% opacity. But also maintain the toggle feature on the Catergories so the User can come off the menu at any given time.

I've had a think and could this be achieve by a Jquery If statement?

If the Sub menu is open then Fade the homepage to 50%? if so how would I write this in Jquery as I am baffled?

Thanks again for your input though.

---

It is because when you click #motors you also click on #cat.

Try binding the events to the anchor elements instead.

---

Just by putting the id of cat on the anchor and not the li, I think you'd get closer to your goal. Not sure I understand the end point, but this should be closer:

http://jsfiddle.net/k7V7h/