toggle link in jquery

Question

I am trying to toggle a link that has id showmember.

I did the following

$("#table2").hide(); //this is for hiding table when page loads first time
$("#showmember").toggle(function(){
       $("#table2").show(); 
       $("#showmember").html("Hide Member Details");      
       event.preventDefault();
       }, 
       function () {
       $("#table2").hide(); 
       $("#showmember").html("Show Member Details");      
       event.preventDefault();
});
<a id="showmember" href="" >Show Member</a>

However, it works sometime and sometimes it doesn't. Actually it gives me JS error on first page load saying 'Object expected' when i click on the link it takes me to a different page. when i click browser back button and come back to original page then everything works as expected. I am using ie6

Answer 1

Your not passing the event object into the function.

$("#table2").hide(); //this is for hiding table when page loads first time
$("#showmember").toggle( function(event){
          $("#table2").show(); 
          $("#showmember").html("Hide Member Details");      
          event.preventDefault();
       }, 
       function (event) {
          $("#table2").hide(); 
          $("#showmember").html("Show Member Details");      
          event.preventDefault();
});
<a id="showmember" href="" >Show Member</a>

Answer 2

You are missing the reference to the parameter event in the handler functions, not sure that's the cause of your problem, but may help to have with not throw exception when it executes

$("#showmember").toggle(function(event){
       $("#table2").show(); 
       $("#showmember").html("Hide Member Details");      
       event.preventDefault();
       }, 
       function (event) {
       $("#table2").hide(); 
       $("#showmember").html("Show Member Details");      
       event.preventDefault();
});

Answer 3

You will need to pass the event as a parameter as other have said, but I assume maybe it something to do with the code executing before the link has actually loaded? Try moving the code to the $(document).ready() block:

$(document).ready(function(){
  //Your code:
  $("#table2").hide(); //this is for hiding table when page loads first time
  $("#showmember").toggle( function(event){
          $("#table2").show(); 
          $("#showmember").html("Hide Member Details");      
          event.preventDefault();
       }, 
       function (event) {
          $("#table2").hide(); 
          $("#showmember").html("Show Member Details");      
          event.preventDefault();
  });
});

You should put code which interacts with elements on the page (at page load) in this function.

Excuse me if you're doing that and just omitted that detail :)

(Also, excuse me if you're not trying to do this on page load, I just read the question again and now Im not so sure...)

Answer 4

If you remove the event.preventDefault() line from the toggle handlers it should work properly. I tested the following code in IE6.

$(function() {
    $("#table2").hide(); //this is for hiding table when page loads first time
    $("#showmember").toggle(
        function() {
            $("#table2").show();
            $("#showmember").html("Hide Member Details");
        },
        function() {
            $("#table2").hide();
            $("#showmember").html("Show Member Details");
        }
    );
});

I don't believe you need to prevent the default action from occuring in your case because you haven't given the href attribute of the anchor a value. If you do decide to prevent the default action, you'll need to define the event parameter in your toggle handlers as others have mentioned.

$(function() {
    $("#table2").hide(); //this is for hiding table when page loads first time
    $("#showmember").toggle(
        function(e) {
            $("#table2").show();
            $("#showmember").html("Hide Member Details");
            e.preventDefault();
        },
        function(e) {
            $("#table2").hide();
            $("#showmember").html("Show Member Details");
            e.preventDefault();
        }
    );
});