Question

so im trying to apply a basic on click show hide element but for some reason it doesnt take no effect

im using it via an external javascript file and including the latest jquery library both included in my master page firebug shows the code so i know its picking it up

heres the code ive 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 dont see the problem myself

This was the solution i used in the end does what i want it to do 🙂
Thankyou all for the answers too

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

Answer 1

Both handlers will fire at the same time.

I think you’re looking for .toggle():

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

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

Now it will alternate between clicks.

---

EDIT: If you were to use .toggle() in the manner that @Tgr mentioned below, you would need some way to distinguish between the "slow"/"fast" you have in your code.

Here’s one way:

Example: 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;
    };
}());

or like this:

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

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