Drop Down Not Working – jQuery

[Zwiv]

I’m working on a theme for my forum and I want a drop down user panel but the drop down doesn’t seem to be working. I’ve been looking all over the place for a solution but can’t seem to find one. A helpful users from CSS-Tricks helped me get started but I still can’t figure out why the drop down isn’t working.

Link to site:

http://mediaforums.net/

Up top in the right corner is where the drop down is.

Any help?

[Chromawoods]

You have registered the click handler before the element is even existing in the document. If you load the page with dev tools console open, you’ll see Cannot call method 'click' of null so jQuery doesn’t know about $(this).siblings('.controls') yet..

You have two alternatives. Either run that piece of script in the bottom of the page (you should try to put as much as you can there to avoid render blocking). Or, wrap your event handler in jQuery’s $(function() {});, like this:

$(function() {
    $('.open_controls').click(function(e) {
        e.preventDefault();

        $(this).siblings('.controls').fadeToggle(200);
    });
});

[Zwiv]

Alright, that seemed to work placing it in the bottom of the page, however, I also had to remove

<script type="text/javascript">jQuery.noConflict();</script>

in order for it to work which now is preventing me from collapsing the forum tables on my forum’s index…

I suppose I’d rather have the drop down work rather than the collapse but I’d definitely like to figure out a way to make both of them work. :P

[Alen]

Put noConflict back in and try using jQuery instead of $. So:

$('') becomes jQuery('')

[Chromawoods]

I see, $ is used by prototype too on your page. Well, you can still use $ as a jQuery alias if you pass it to your onready function, like this:

jQuery(function($) {
    // You can now use $ as a reference to jQuery inside of this scope, hooray!
});

..or you can make a straight up function expression:

(function($) {
    // You can now use $ as a reference to jQuery inside of this scope, hooray!
}(jQuery));

[Author]

Posts