jQuery Vertical Dropdown w/ Fade

Question

This works. However, clicking the "#pages-btn" again doesn't close "#instruct-pages" div. Is there a better way to write this? Thanks for the help.

Here is a fiddle to demonstrate my issue: http://jsfiddle.net/PCzfs/1/

$("#pages-btn").click(function () {
    $("#instruct-pages").fadeToggle();
    $(this).addClass("options-active");
});
$(document).mouseup(function (e) {
    var container = $("#instruct-pages");
    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        container.fadeOut();
        $("#pages-btn").removeClass("options-active");
    }
});

kei · Accepted Answer · 2013-09-30T23:29:16.530

0

var $instructPages = $("#instruct-pages");
$instructPages.is(":visible") ? $instructPages.fadeOut() : $instructPages.fadeIn();

demo

Updated:

How would you toggle the .options-active class for "click"? It works when you click outside the container but doesn't work if you click the actual button.

var $instructPages = $("#instruct-pages");
if ($instructPages.is(":visible"))
{
    $instructPages.fadeOut();
    $(this).removeClass("options-active");
}
else
{
    $instructPages.fadeIn();
    $(this).addClass("options-active");
}

demo

edited Sep 30 '13 at 23:29

answered Sep 30 '13 at 14:45

kei

20,157
2
35
62

How would you toggle the .options-active class for "click"? It works when you click outside the container but doesn't work if you click the actual button. Thanks again. – DesignerUXTX Sep 30 '13 at 19:17

score 0 · Answer 2 · answered Sep 30 '13 at 14:46

0

http://jsfiddle.net/PCzfs/2/

$("#pages-btn").click(function (e) {
     var container = $("#instruct-pages");
    container.fadeToggle();        

    if (!container.is(e.target) && container.has(e.target).length === 0){
        if($(this).hasClass('options-active')){
            $("#pages-btn").removeClass("options-active");    
        }else{
            $("#pages-btn").addClass("options-active");
        }   

    }

});

answered Sep 30 '13 at 14:46

carter

5,074
4
31
40

This works but disables clicking outside of the container. Thanks. :) – DesignerUXTX Sep 30 '13 at 15:24

score 0 · Answer 3 · answered Sep 30 '13 at 14:49

0

You can just add this to your mouseup function:

e.target.id!=="pages-btn"

answered Sep 30 '13 at 14:49

Speedy

198
1
8

jQuery Vertical Dropdown w/ Fade

3 Answers3