CODEWITHSUNDEEP
jquery
Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

JQuery toggle() function

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/

Upvotes: 1

Views: 1682

Answers (2)

dhinesh
dhinesh

Reputation: 4764

 $("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

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

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;
    });

});

Upvotes: 1

Related Questions