onclick, click not working? jquery

2
votes

I'm simply trying to change a hover trigger to a click but for some reason any click function I use does not work?

This my current code that works when you hover...

Current Script Thats Working on hover...

    $showSidebar.hover(function() {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

But see my attempts below to get it work when clicked, but weirdly nothing happens.

My Attempt One

    $showSidebar.click(function() {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

and

My Attempt Two

    $showSidebar.on('click', function () {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

and a couple of others but nudda...

This is my mark up...

<a href="#" title="More" class="button blu large" id="show-sidebar"><span>//</span> MORE</a>

and my var

$showSidebar  = $("#show-sidebar");

Any ideas where I'm going wrong? Would be hugely helpful thanks!

See working code, thanks @hurshagrawal

$showSidebar.on('click', function () {
    if ($showSidebar.html() == '<span>//</span> CLOSE') {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    } else {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
        $showSidebar.html('<span>//</span> CLOSE');
    }
});
3
javascriptjqueryclick
Using Firebug in FF do you get any javascript errors? – Cyclonecode
Why do you pass 2 parameters into .click()? – zerkms
Nope, syntax errors, not nothing :-/ – Joshc
@zerkms how do you mean? – Joshc
@Krister Andersson: how about second code sample? – zerkms

3 Answers

3
votes

I think you are looking for the .toggle() command:

$showSidebar.toggle(function() {
    $wrapper.stop().animate({ left: "-178px" }, 300);
    $sidebarSlider.stop().animate({ width: "452px" }, 300);
    $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
}, function() {
    $wrapper.stop().animate({ left: "0" }, 300);
    $sidebarSlider.stop().animate({ width: "274px" }, 300);
    $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});
1
votes

I don't think $.click() takes 2 functions as parameters. Did you try taking the second function out? If you're trying to toggle between the two, you might have to write something with an if-else in there.

EDIT: Ah, or use .toggle().

0
votes

Try using bind(), I've found that more reliable across browsers.

http://api.jquery.com/bind/

basic usage in your case would be (untested):

$showSidebar.bind('click', function() {
  // do stuff
});