JQUERY Dropdown Div Issue

Question

I have accordions which works fine. And in line with each accordion heading is another div which gives a status of either complete or incomplete depending on values from a database.

When the user clicks a status, a dropdown to appear with a link to change the status of the current item. It does this by checking if the child element of has the class "complete". Depending on whether this returns true or false, different content is appended to the dropdown div.

I uploaded my code to a fiddle, however the dropdown button won't work yet it works fine on my computer.

What I have accomplished with my code so far is that when a user clicks a status, the dropdown appears with the correct change of status link. Also When the user has one dropdown already open, and they click the status bar on a different accordion, the previous one closes before the new one opens.

What I want to accomplish also, is that when the user clicks anywhere outside the dropdown, it closes and is removed.

How would I do this?

Here is a fiddle: http://jsfiddle.net/mickzer/3MbRJ/4/

And the JQUERY

$(".status").live('click',function () {

    $(".change-status").fadeOut("normal", function() {
        $(this).remove();
    });

    var checkComplete=$(this).children().hasClass("complete");

    var changeStatus="<div class=\"change-status\"></div>";
    $(this).after(changeStatus);
    $(".change-status").hide();
    $(".change-status").fadeIn();

    if(checkComplete) {

        var statusType="<p class=\"mark\">Mark as Incomplete</p>";
        $(statusType).appendTo(".change-status");

    }

    else if(!checkComplete) {

        var statusType="<p class=\"mark\">Mark as Complete</p>";
        $(statusType).appendTo(".change-status");

    }       

});

Thanks for any help

Here are a couple of answers that would get you started. http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — berentrom, Feb 16 '14 at 15:13

score 0 · Answer 1 · answered Feb 16 '14 at 15:47

I have forked your code in this fiddle : http://jsfiddle.net/Lar87/

Is this what you want to achieve ?

    $(document).on('click', function (e) {
        closeAllStatus();

        candidates = $(e.target).parents('.status');
        if (candidates.length > 0) {
            showDropdown(candidates[0]);
        }
    });

function closeAllStatus () {
        $(".change-status").fadeOut("normal", function() {
            $(this).remove();
        });
}

function showDropdown(element){
        var checkComplete=$(element).children().hasClass("complete");

        var changeStatus="<div class=\"change-status\"></div>";
        $(element).after(changeStatus);

        if(checkComplete) {

            var statusType="<p class=\"mark\">Mark as Incomplete</p>";
            $(statusType).appendTo(".change-status");

        }

        else if(!checkComplete) {

            var statusType="<p class=\"mark\">Mark as Complete</p>";
            $(statusType).appendTo(".change-status");

        }       

    }

JQUERY Dropdown Div Issue

1 Answers1