Click button to change CSS in D7

Question

I'm trying to create a clickable link that changes the css using jquery. I've tried many approaches and nothing seems to work. Hopefully someone here can push me into the right direction.

Button html (in a block):

<a href="#" id="change_css">Change CSS</a>

Button code (in change_css.js):

(function($) {
    Drupal.behaviors.my_node_toggle = {
        attach: function(context, settings) {
            $("#change_css", context).click(function(){
                $('a').css({"color":"#ff0"});  
            });
        }
    };
})(jQuery);

The script is being loaded, but nothing happens when I click on the link.

Answer 1

Your problem resides in the way you are calling the css function in jQuery. Try this, it works for me:

(function($) {
  Drupal.behaviors.my_node_toggle = {
    attach: function(context, settings) {
      $("#change_css", context).click(function() {
        $('a').css("color","#ff0");
      });
    }
  };
})(jQuery);