Toggle Click Alternative

Question

If you go and view the api of JQuery's .toggle you can see it's been deprecated since 1.8 and removed in 1.9.

This is what I would normally use if I was using an older version of JQuery. [Example]

$('.drop-section a').toggle(function() {
  $(this).css({"color" : "#666", "background-color" : "#1f1f21"});
},
function() {
  $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
});

I'm trying to do a simple workaround from a click event. but I'm having trouble getting it to work. [Here's the fiddle]

I know I can use toggleClass, but I want to accomplish this effect using something like below.

$('.drop-section a').click(function() {
  var clicked = false;

  if (clicked) {
    clicked = false;
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
  }
  clicked = true;
  $(this).css({"color" : "#666", "background-color" : "#1f1f21"});

});

Any help is greatly appreciated.

Answer 1

On jQuery page it says:

Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

It take you to this page >> http://api.jquery.com/toggle/

I suggest using toggleClass:

body {
  background: #333;
}

a {
  cursor: pointer;
  padding: 5px;
  background: #444;
  font: 300 16px/1.5 'museo-sans', 'Open Sans', sans-serif;
  color: #a9a9a9;
  outline: none;
  text-decoration: none;
  background-color: #444;
}

.newClass{
  color: #a9a9a9;
  background-color: #444;
}

jQuery

$(document).ready(function(){
  $("a").click(function(){
     $(this).toggleClass("newClass");
  });
});

Answer 2

Actually you can do it like:

LIVE DEMO

$('a').click(function( e ) {
  e.preventDefault();
  var c = this.c = !this.c;    // Will remember the clicked state
  $(this).css({ "color": c?"#666":"#aaa" });
});

To explain how it works:

The above is almost the same as setting an element data-* attribute, but instead we'll use the Object itself and assign a property that will hold a boolean value.

DEMO

$('a') is a jQuery collection of object elements,
so it's an Object, and this it's the JS representation of that clicked element.
In JS we can always add a new property to an object like: object.something = "value"; right?

Ok, so in our case we'll use the this object and assign a dummy property called c like: this.c

so now all we need is to set a boolean (true / false) value and attach it to this.c

this.c = true ; 

taking in consideration that we need to toggle the value on every click we do like:

this.c = !this.c ;

the negation will just invert the boolean value to it's opposite.

So far what we have?

on every click we toggle the button's this.c property to true / false.

Let's use that boolean and store it into a variable we'll call for simplicity c

var c = this.c = !this.c;

which basically means c = (a true/false value) on every click stored directly into that element property.

Now having that boolean we can use it in combination with a Conditional Operator (AKA Ternary Operator) ?: to toggle any desired value, in our case the colors:

statement ? do this if true : do that if false ;

or in our case:

"color":  ( c ? "#666" : "#aaa" ) // #666 if true, #aaa if false

Answer 3

Demo http://jsbin.com/ODIMaju/1/edit

Better Smart for the toggleClick Working demo: http://jsbin.com/ODIMaju/1/edit

Flip flop alert will help you to understand and I have changed the scope of variable.

further if you keen :) http://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead

Rest should suffice your needs :)

Code

 $.fn.toggleClick = function(){
    var methods = arguments, // store the passed arguments for future reference
        count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability
    return this.each(function(i, item){
        // for each element you bind to
        var index = 0; // create a local counter for that element
        $(item).click(function(){ // bind a click handler to that element
            return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element
            // the index % count means that we constrain our iterator between 0 and (count-1)
        });
    });
};

code

$(document).ready(function() {
 var clicked = false;

$('.drop-section a').click(function() {

  if (clicked) {
    alert(clicked);
    clicked = false;
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
  }
  else {
    alert(clicked);
    clicked = true;

  $(this).css({"color" : "#666", "background-color" : "#1f1f2zxc1"});
  }
});
});

Answer 4

In your case, I would just use toggleClass(), which is still supported. Add a class that changes the button to the "on" state, and then toggle that class on and off on click. I altered your JSbin to demonstrate: New JSBin

Edit: If you're determined to do it with your code, or have other requirements you're not telling us about: your clicked variable is destroyed once you leave the handler, so it doesn't "remember" when it's been clicked. You also don't want to just make it global, because then it wouldn't work with multiple buttons.

What you want is to attach the "clicked" data to the element that you're toggling things on, which is easy with the data() method:

$('.drop-section a').click(function() {
  if ($(this).data('clicked')) {
    $(this).data('clicked',false);
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
  } else {
    $(this).data('clicked',true);
    $(this).css({"color" : "#666", "background-color" : "#1f1f21"});      
  }
});

Also, I'm not sure why the second bit isn't wrapped in an else{}, but it should be, otherwise it will just always end up "clicked", regardless of state. I (accidentally, versioning in JSBin is lacking compared to jsfiddle) updated the above link to use this code. Old link here. Make sure to click the "Run with JS" button if it doesn't seem to be working.