Jquery Toggle an animate opacity function

Question

When I click on "identity", I would like "fromfrancetoggle" and "lamiettetoggle" to appear. When I click again, I just want them to disappear.

I tried with this code but I can't get it to work. Could someone please tell me where is my error ?

<script>
$(document).ready(function(){

$("#identity").click(function(){
    $("#fromfrancetoggle").animate({opacity: "0"}, 500 );
     $("#lamiettetoggle").animate({opacity: "0"}, 500 );
     $(".identity").addClass('active');

      $("#identity").click( function(e){
      e.preventDefault();
        if ($(this).hasClass("active") ) {
            $("#fromfrancetoggle").animate({opacity: "1"}, 500 );
            $("#lamiettetoggle").animate({opacity: "1"}, 500 );         
            $(this).removeClass("active");

             } else {

             $("#fromfrancetoggle").animate({opacity: "0"}, 500 );
             $("#lamiettetoggle").animate({opacity: "0"}, 500 );  
            $(this).addClass("active"); }

                        return false;
});
});
</script>

Answer 1

Something like this:

HTML:

<input type="button" id="identity" value="identity button" />
<div id="fromfrancetoggle">fromfrancetoggle</div>
<div id="lamiettetoggle">lamiettetoggle</div>

Jquery:

$("#identity").click(function(){
 $("#fromfrancetoggle").toggle();
 $("#lamiettetoggle").toggle();
});

Working fiddle: http://jsfiddle.net/robertrozas/VPLn9/

Answer 2

$("#identity").click(function(e){
 $("#fromfrancetoggle").toggle();
 $("#lamiettetoggle").toggle();
 $(this).toggleClass('active');
 e.preventDefault();
});

Answer 3

Mostly right, though you have an extra click handler. This should work:

$(document).ready(function(){

    $("#identity").click(function(e){
        e.preventDefault();
        if ($(this).hasClass("active") ) {
            $("#fromfrancetoggle").animate({opacity: "1"}, 500 );
            $("#lamiettetoggle").animate({opacity: "1"}, 500 );         
            $(this).removeClass("active");
        } else {
            $("#fromfrancetoggle").animate({opacity: "0"}, 500 );
            $("#lamiettetoggle").animate({opacity: "0"}, 500 );  
            $(this).addClass("active"); 
        }
        return false;
    });
    $("#identity").trigger("click"); // initial fade
});

The trigger() call replaces the initial fade out -- remove that if it's not what you want.

As noted by other answers, you can just call toggle directly on the jQuery selector.

Answer 4

Try

    $("#identity").on("click", function(e) {
      $(e.target).toggleClass("active");
      $("#fromfrancetoggle, #lamiettetoggle").toggle(500);
    });

jsfiddle http://jsfiddle.net/guest271314/m7swu/

Answer 5

I think that another option is to use CSS3 'transition' here. Write:

<style>
#fromfrancetoggle, #lamiettetoggle {
 transition: 0.5s;-moz-transition:0.5s;-webkit-transition:0.5s;
 opacity:0;
}
#fromfrancetoggle.visible, #lamiettetoggle.visible {
 opacity:0.99999;
}
</style>
<script>
$(document).ready(function(){

$("#identity").click(function(){
    $("#fromfrancetoggle,#lamiettetoggle").toggleClass("visible");
});
});
</script>

It should work in this case.