CODEWITHSUNDEEP
javascriptjqueryhtmlcssif-statement
Nikki_Heights
Nikki_Heights

Reputation: 115

Jquery-Using the 'show' and 'hide' on click function

I have an animated navigation (http://tympanus.net/codrops/2011/03/16/expanding-image-menu/) and have modified it so I have a fader off to the left side. All I want it to do is 'hide' when the menu is in its expanded state, and 'show' when the menu is collapsed. Here is the code I have written thus far: 

$menuItemsImgWrapper.on('click', function () {
    if ($('.ei_descr').is(':visible')) {
        $('#fader').hide();
    } else {
        $('#fader').show();
    }
});

The fader hides fine, but will not show. If anyone can give me a clue as to why this is, I'd really appreciate it. Thank you for your time.

Upvotes: 0

Views: 94

Answers (4)

arieljuod
arieljuod

Reputation: 15838

Check what the plugin does to handle opening/closing the text:

$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
    var $this   = $(this).parent(),
    idx     = $this.index();

    if(current === idx) {
        slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
        current = -1;
    }
    else{
        if(validCurrent() && current !== idx)
                slideOutItem($menuItems.eq(current), false, 250, 'jswing');

        current = idx;
            slideOutItem($this, true, 250, 'jswing');
    }
    return false;
});

why don't you use that event and that if/else to hide #fader?

something like

$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
    var $this   = $(this).parent(),
    idx     = $this.index();

    if(current === idx) {
        //then it collapses the text
        $('#fader').hide();
    }
    else{
        //then it expands the text
        $('#fader').show();
    }
    return false;
});

Upvotes: 1

arieljuod
arieljuod

Reputation: 15838

Just use Jquery's toggle method:

$menuItemsImgWrapper.on('click', function () {
    $('#fader').toggle();
});

it will hide #fader if it is visible and show it if hidden

Upvotes: 0

MentalRay
MentalRay

Reputation: 344

:visible checks for opacity and visibility. fade() though turns the object into display: none;. So your object is visible but not shown on display.

Upvotes: 0

pdp2
pdp2

Reputation: 141

This is because the element with the class: ".ei_descr" is still visible. You have only stated to hide an element with the id: "#fader".

Hence, the code in the if statement will always evaluate to true unless you also hide ".ei_descr".

Upvotes: 1

Related Questions