switching opacity of a div onclick

Question

I want to have 2 animation when clicking on a text link :

• display a div when clicking, and hide it when clicking again (it works perfectly)
• change opacity of another div to 0.5, and change back opacity when clicking again (back to opacity =1).

the opacity works when clicking, but at the second click I can't make it go back to opacity=1.

I tried with :

.fadeTo, .fadeToggle, but I can't make it work...

so when clicking on "#edition2014", ".menu_edition_2014" displays and "#menu" fades to 0.5 with a fade out animation, and when clicking again on "#edition2014", ".menu_edition_2014" hides and "#menu" fades to 1, with a fade in animation.

here is my Jquery :

$(document).ready(function() {
    $('#edition2014').click(function() {
            $('.menu_edition_2014').slideToggle("slow");
        $( '#menu' ).fadeTo( "fast", 0.5);
    });
});

here is a jsfiddle : http://jsfiddle.net/APA2S/1500/

thanks a lot for your help,

Answer 1

You can do something like this

$( '#menu' ).fadeTo( "fast", $('#menu').css("opacity") == "1" ? "0.5" : "1");