Calling jQuery .toggle() on click

Question

I'm attempting to use jQuery to hide a livestream widget on this page.

I've set the default visibility of the containing div to hide like so:

#library {
    visibility: hidden
}

Set up a button to toggle the state like so:

<a href="#" id="showhide">Show/Hide Reruns</a></span>

And tried to implement the function like this:

$('#showhide').click(function(e){
$('#library').toggle();
    return false;
    })
});

But I'm running into problems. The library widget is still visible on page load, and its CSS doesn't change in the element inspector either.

I've set up a fiddle here if it helps: http://jsfiddle.net/GecwN/

Answer 1

I changed your toggle to this

    $('#showhide').click(function (e) {
        $('#library').toggleClass("library");
     })

I change the visibility property to

   display: none;

I also change your css from #library to .library in order to toggle the class

But then I think most importantly after doing those things, what I did was put your .click handler within the document.ready by just taking out the }) right before it. There was an extra one in there. It worked perfect

http://jsfiddle.net/SteveRobertson/GecwN/11/