What is wrong with this jquery script?

Question

so I'm trying to apply the basic click show hide element, but for some reason it has no effect.

im using it through an external javascript file and including the latest jquery library included in my firebug main page shows the code, so I know that he picked it up

heres ive code tried

$(document).ready(function () {
// hides the divx as soon as the DOM is ready
$('#ecom').hide();
// shows the div on clicking the noted link  
$('.eco').click(function () {
    $('#ecom').show('slow');
    return false;
});
// hides the div on clicking the noted link  
$('.eco').click(function () {
    $('#ecom').hide('fast');
    return false;
}); 
});

HTML

<h2 class="eco">Ecommerce Web Design</h2>
<div id="ecom">content</div>

I myself do not see a problem

This solution, which I used at the end, does what I want to do :) Thanks too for the answers.

$(document).ready(function () {
$('#ecom').hide();
$('.eco').click(function () {
    $('#ecom').toggle('slow');
    return false;
});

Answer 1

Both handlers will run simultaneously.

I think you are looking for .toggle():

Example: http://jsfiddle.net/patrick_dw/uuJPc/

$('.eco').toggle(function () {
    $('#ecom').show('slow');
    return false;
},function () {
    $('#ecom').hide('fast');
    return false;
});

.

---

: .toggle() , @Tgr, , - "slow"/"fast" .

:

: http://jsfiddle.net/patrick_dw/uuJPc/1/

$('#ecom').hide();
$('.eco').click(function () {
    var i = 0;
    return function() {
        $('#ecom').toggle(i++ % 2 ? 'slow' : 'fast');
        return false;
    };
}());

:

: http://jsfiddle.net/patrick_dw/uuJPc/2/

$('#ecom').hide();
$('.eco').click(function () {
    var ec = $('#ecom');
    ec.toggle(ec.is(':visible') ? 'slow' : 'fast');
    return false;
});

Answer 2

toggle , , . , , , , .

$(document).ready(function(){
    // Hide ``#ecom`` on page load.
    $('#ecom').hide();
    // Attach only one click handler (yours was attaching a handler that showed
    // the div and then on that hid the div, so it was always shown, and then
    // hidden instantly, therefore canceling your intended effect.
    $('.eco').click(function(e){
        // ``preventDefault()`` is the W3 correct way to stop event propagation
        // and works cross-browser. It a bound method on all DOM events.
        // Notice I've given my click handler function an argument ``e``. When
        // you register an event handler function, the event that causes the
        // handler function to be called is provided as the first argument handler
        // function, thus giving us ``e`` as a local reference to the event.
        e.preventDefault();
        // Use ``is()`` to compare the element against the ``:hidden`` selector.
        // This will tell us if it hidden or not.
        if($('#ecom').is(':hidden'))
        {
            $('#ecom').show('slow');
        } else {
            $('#ecom').hide('fast');
        }
    });
});