JQuery toggle() function

Question

I have a problem, When I click on the link p open, and then I click in the other link it doesn't work. It works when I click again.

This is my jQuery code:

var toggle = 0;
$(document).ready(function () {
    $(".feedback_block").each(function () {
        $("a", this).click(function (e) {
            if (toggle == 0) {
                $(this).parent().children("p").stop(true, true).fadeIn(500);
                $(this).addClass("clicked");
                $(this).children().addClass("clicked_span");
                toggle = 1;
                console.log(toggle);
            } else
            if (toggle == 1) {
                $(this).parent().children("p").stop(true, true).fadeOut(500);
                $(this).removeClass("clicked");
                $(this).children().removeClass("clicked_span");
                toggle = 0;
                console.log(toggle);

            }
            e.stopPropagation();
            return false;
        });
        toggle = 0;
    });
});

When I click the parameter toggle get 1 and when I click another link the initial value should be 0. How can i do it?

My example: http://jsfiddle.net/amkrtchyan/tjzaR/

I've edited this, but the S/O editor refused about 10 suggested titles (infuriating). Anyone, please improve my (forthcoming) edit. — halfer
– halfer, Commented Mar 20, 2012 at 10:38

Nicola Peluchetti · Accepted Answer · 2012-03-20 10:27:56Z

1

You could simply use toggle() (http://jsfiddle.net/tjzaR/2/)

$(document).ready(function () {
    $(".feedback_block").each(function () {
        $("a", this).toggle(function (e) {

                $(this).parent().children("p").stop(true, true).fadeIn(500);
                $(this).addClass("clicked");
                $(this).children().addClass("clicked_span");

            }, function(){
                $(this).parent().children("p").stop(true, true).fadeOut(500);
                $(this).removeClass("clicked");
                $(this).children().removeClass("clicked_span");


            });
    });
});

or you could do (fiddle here http://jsfiddle.net/tjzaR/1/)

$(".feedback_block").each(function () {
    $("a", this).click(function (e) {
        if (!$(this).parent().children("p").is(":visible")){
            $(this).parent().children("p").stop(true, true).fadeIn(500);
            $(this).addClass("clicked");
            $(this).children().addClass("clicked_span");

        } else{
            $(this).parent().children("p").stop(true, true).fadeOut(500);
            $(this).removeClass("clicked");
            $(this).children().removeClass("clicked_span");


        }
        return false;
    });

});

answered Mar 20, 2012 at 10:27

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aram Mkrtchyan Over a year ago

I know the function toggle(), but there is a way to do this in my code?

voigtan Over a year ago

@AramMkrtchyan just remove your $("a", this).click(function (e) { with the code above, and remove the toggle variable you created.

CreativeNerdSam Over a year ago

The first method documented here is now deprecated as of jQuery Version 1.9 - Just a heads up

dhinesh · Accepted Answer · 2012-03-20 10:31:12Z

0

 $("a", this).toggle(function () {

                $(this).parent().children("p").stop(true, true).fadeIn(500);
                $(this).addClass("clicked");
                $(this).children().addClass("clicked_span");
                return false; 

            }, function(){

                $(this).parent().children("p").stop(true, true).fadeOut(500);
                $(this).removeClass("clicked");
                $(this).children().removeClass("clicked_span");
                return false;

            });

Can we not directly use the toggle function. Toggle

answered Mar 20, 2012 at 10:31

dhinesh

4,8142 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

JQuery toggle() function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related