Question

I want to use jQuery to toggle the opacity of an element between 0.3 and 1.0 on a button click.
The trouble i am having is starting the element off with an opacity of 0.3 and then on the first click, making it fully visible with a 1.0 opacity.
The code I have tried is below:

$(document).ready(function(){

    //Start faded to 0.3
    $(".fadingElement").fadeTo(0, 0.3);

    //When the trigger is clicked first, fade the relevant item back up to 1.0
    $("div.trigger").toggle(
        function(){ 
            $(this).parent().next().fadeTo('fast', 1.0);
        }, 
        function () {  
            $(this).parent().next().fadeTo('fast', 0.3);
        }
    );
});

When the “div.trigger” is clicked, it does not fade up, when clicked again, it fades a further 0.3! When clicked a third time, it fades to its starting 0.3.

How do i start the element at 0.3, and bring it back up to fully visible (1.0) on the first click? What is going on here?

Answer 1

The problem (based on the code in your fiddle) is that the element you actually want to fade is <div class="student_notified">, but your code is fading the parent of that div rather than the div itself.

You can use the find method to select the correct element within its parent:

$(this).parent().next().find(".student_notified").fadeTo('fast', 0.3);

Here’s an updated fiddle.