Passing IDs to jquery functions

Question

Okay guys, I greet you all! I have been having this newbie question in jquery. I love the great animations that jquery can do and all those cool Mozilla stuff! Okay that's by the way! I have a couple of DIV elements with different IDs that i have been trying to show/hide through a function passed into javascripts onclick() method. I have gone through a couple of a examples presented in the Questions section, but I don't understand why what am doing isn't working!

Now this is my jquery code:

$(document).ready(function(){ 
   var toggle_btn = $('.toggle-button');
   var contentToggle = function(element){
      toggle_btn.click(function(e){
         If($(this).hasClass('switch-off')){
            $(this).removeClass('switch-off');
            $(this).addClass('switch-on');
            $('#' element).hide();
         }else{
            $(this).removeClass('switch-on');
            $(this).addClass('switch-off');
            $('#' element).show();
         }
         e.preventDefault();
      });
   } 
   contentToggle();
});       

The following is path of my html:

<a href='' onclick='contentToggle('color-list') class='toggle-button switch-off'>
<div id="color-list">Container Contents</div>

And my css:

#color-list{display:none;}

Unfortunately, this doesn't seem to work however I tried! Please can you guys help point me in the right direction? What haven't I done correctly?

Answer 1

There are some issues with the code, some pointed out by the comments, but the main one is how you are approaching the onClick event. You are wiring up your click event inside a function then calling it, you should have defined it within the $(document).ready scope instead, also you would not need an inline onClick event after you do that.

Here is a JSFiddle with my 'recommended' code. I hope it helps you out.

http://jsfiddle.net/V54fJ/2/

HTML:

<button class='toggle-button switch-on'>Test</button> <div id="color-list">Container Contents</div>

JAVASCRIPT:

$(document).ready(function(){ 
    $('.toggle-button').click(function(event){
        if($(this).hasClass('switch-off')){
            $(this).removeClass('switch-off');
            $(this).addClass('switch-on');
            $('#color-list').hide();
        } else {
            $(this).removeClass('switch-on');
           $(this).addClass('switch-off');
           $('#color-list').show();
        }
        event.preventDefault();
    });
}); 

If you still want to keep a separate function where you can still send the ElementId as a variable, you can do something like that: (http://jsfiddle.net/V54fJ/3/)

$(document).ready(function(){   

     $('.toggle-button').on('click', 
                            function(event){
                                toggleVisibility(this,'color-list');
                                event.preventDefault();
                            });

     function toggleVisibility(caller,elementId)
     {
      if($(caller).hasClass('switch-off')){

             $(caller).removeClass('switch-off');
             $(caller).addClass('switch-on');
             $('#'+elementId).hide();
     }
      else{

             $(caller).removeClass('switch-on');
             $(caller).addClass('switch-off');
             $('#'+elementId).show();
     }

     }  });

Answer 2

If you're using jQuery you really do not need the inline JavaScript calls. Modify your HTML to be this -

<a href='' class='toggle-button switch-off'>Click Me</a>
<div id="color-list">Container Contents</div>

A few modifications to your jQuery will complete the deal -

var contentToggle = function(element){
    if( $(element).hasClass('switch-off')){ // lowercase i on 'if'
        $(element).toggleClass('switch-off switch-on');
        $('#color-list').hide();
     }else{
        $(element).toggleClass('switch-on switch-off');
        $('#color-list').show();
     }
  } 

$('.toggle-button').click(function(e) {
    e.preventDefault();
    contentToggle( $(this) ); // pass the toggle-button to the function
});

In your original you're passing element to the function and trying to use $(this) inside the function. $(this) is not defined inside of contentToggle.

Here is a demo - http://jsfiddle.net/jayblanchard/zZd8R/ (keep in mind that color-list will not show on the first click, because the first click still directs the list to be hidden)