detect if a class is clicked using jquery

Question

 $(".Personalized").click(function(){

    $.ajax({

        type:"POST",
        url:"personalized.php",
        cache:false,
        beforeSend: function(){
            $('#loading_personalized').show();
            $('#triangle-personalized').show();
        },

        complete: function(){
            $('#loading_personalized').hide();

        },
        success: function(html){


            $("#divPersonalized").html(html).show();
        }

    });

});

when i click on personalized class the divPersoanlized shows up,,now i want to hide it on again clicking on personalized..how can i do it...

adeneo · Accepted Answer · 2014-02-03 18:56:13Z

5

Normally you'd just use toggle() to toggle the element, but in this case you probably don't want to run the ajax call every time

$(".Personalized").click(function(){

    if ( $("#divPersonalized").is(':visible') ) {

        $("#divPersonalized").hide();

    } else {

        $.ajax({
            type:"POST",
            url:"personalized.php",
            cache:false,
            beforeSend: function(){
                $('#loading_personalized').show();
                $('#triangle-personalized').show();
            },
            complete: function(){
                $('#loading_personalized').hide();
            },
            success: function(html){
                $("#divPersonalized").html(html).show();
            }
        });
    }
});

edited Feb 3, 2014 at 18:56

answered Feb 3, 2014 at 18:48

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

Irfan TahirKheli Over a year ago

"Normally you'd just use toggle() to toggle the element, but in this case you probably don't want to run the ajax call every time"... So what is the difference between your code and using toggle?

adeneo Over a year ago

Using toggle you would just toggle the elements visibility, as that's what toggle does, but the way it's done above it doesn't just toggle the elements visibility, it also only runs the ajax call when the element is visible, not when it's hidden, as that wouldn't really make sense.

dfsq · Accepted Answer · 2014-02-03 18:48:47Z

2

For example like this:

$(".Personalized").click(function () {

    var $divPersonalized = $("#divPersonalized");

    if ($divPersonalized.is(':hidden')) {
        $.ajax({
            // ...
            success: function (html) {
                // Show the div
                $("#divPersonalized").html(html).show();
            }
        });
    }
    else {
        // Hide the div
        $divPersonalized.hide();
    }
});

answered Feb 3, 2014 at 18:48

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

kpmDev · Accepted Answer · 2014-02-03 19:07:50Z

0

To use the visible selector in jquery. visible doc.

You can try this:

$(".Personalized").click(function(){


            if($('#divPersonalized').is(':visible')) {

                    $('#divPersonalized').hide();

            } else {

                 $.ajax({  

                      ...
                      ...
                        success: function(html){
                          $("#divPersonalized").html(html).show();
                        }
                      ...
                      ...
                 });
            }

});

edited Feb 3, 2014 at 19:07

answered Feb 3, 2014 at 18:58

kpmDev

1,3701 gold badge11 silver badges29 bronze badges

Comments

Satpal · Accepted Answer · 2014-02-03 19:09:43Z

0

You can check if div is visible just hide it. You don't need to call the ajax

$(".Personalized").click(function(){
    //You can use also use $(this).is(':visible')
    if($(this).css('display') !== "none"){
        $(this).hide();
        return;
    }

    //Your ajax code
});

edited Feb 3, 2014 at 19:09

answered Feb 3, 2014 at 18:47

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Irfan TahirKheli · Accepted Answer · 2014-02-03 18:51:55Z

-1

You can use toggle method:

 $(".Personalized").toggle(ShowFunction, HideFunction);

    function ShowFunction(){
     // your code goes here
     $.ajax({
            type:"POST",
            url:"personalized.php",
            cache:false,
            beforeSend: function(){
                $('#loading_personalized').show();
                $('#triangle-personalized').show();
            },
            complete: function(){
                $('#loading_personalized').hide();
            },
            success: function(html){
                $("#divPersonalized").html(html).show();
            }
        });
    }

    function HideFunction(){
     // your code goes here.
      $("#divPersonalized").hide();
    }

answered Feb 3, 2014 at 18:51

Irfan TahirKheli

3,6621 gold badge26 silver badges36 bronze badges

3 Comments

adeneo Over a year ago

Deprecated and removed from jQuery !

Irfan TahirKheli Over a year ago

Which version of jQuery deprecated it?

adeneo Over a year ago

Deprecated in jQuery 1.8 and removed in 1.9

Hamid Reza · Accepted Answer · 2014-02-03 19:00:17Z

-1

Use this:

if($("#divPersonalized").attr("hidden")=="hidden")
{
    $("#divPersonalized").removeAttr("hidden");
}
else
{
    $("#divPersonalized").attr("hidden","hidden");
}

Demo

Update

I updated the Demo.

edited Feb 3, 2014 at 19:00

answered Feb 3, 2014 at 18:54

Hamid Reza

2,97310 gold badges52 silver badges79 bronze badges

Comments

Rob Sedgwick · Accepted Answer · 2014-02-03 19:24:30Z

Throwing into the mix, example of separating the concerns ( subjective ) - worth a look.

(function() { /* wrap it to protect globals - optional */

   /* 1) set some variables accessible to all functions, eg */

    var contentdiv = $("#divPersonalized"), /* cache reused static selector(s) */
    hasdataloaded = false;

    /* 2) create a function to handle the data requests */

    function loaddata() {

        $.ajax({
            type:"POST", url:"personalized.php", cache:false,
            beforeSend: function(){
                $('#loading_personalized').show();
                $('#triangle-personalized').show();
            },
            complete: function(){
                $('#loading_personalized').hide();
            },
            success: function(html){
                hasdataloaded = true; /* updated the status */
                contentdiv.html(html);
            }
        });
    }

   /* 3) A function to handle the show and hide and checki if data has loaded */
       function toggleDataDiv() {
          contentdiv.toggle(); /* showhide */
          if(!hasdataloaded) {  loadData(); } /* only want to load once */
       } 

    /* 4) the event handler */
    $(".Personalized").click(function(){ toggleDataDiv();  });

   /* attach more events to other elements eg */
    $(".someotherelement").click(function() { toggleDataDiv();  });


})();

Collectives™ on Stack Overflow

detect if a class is clicked using jquery

7 Answers 7

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related