CODEWITHSUNDEEP
javascriptjquery
Reynier
Reynier

Reputation: 2478

Show button if div length is higher than one

How I do show/hide (toggle) a button element if div#choices has more than one div inside it and each time the div#choices is showed (it's hidden by default)? This is the code where I toggle div#choices:

$('#choices').on("change", ":checkbox", function(e) {
    var theName = $(this).attr('name');
    var theID = $(this).attr('value');
    var input = "";

    input = '<span>' + capitalize(theName) + '<input name="input_' + theName + '[]" data-id="' + theName + '_' + theID + '" value="" placeholder="' + capitalize(theName) + '" /><br/></span>';

    if ($(this).is(":checked")) {
        $("#" + theName + '_choice_' + theID).find(':button').before(input);
        $("#" + theName + '_choice_' + theID).show();
    } else {
        $("#" + theName + '_choice_' + theID).find(':not(button)').remove();
        $("#" + theName + '_choice_' + theID).hide();
    }
});

Update: added jsFiddle and working on some code based on suggestions

Here is the example of code in which I'm working on: jsFiddle

Also this is the code I made but without success since button remains even when children div's are hidden:

function toggleCreateVariationButton() {
    var toggleThis = $("#choices").children('div').length > 1 && $('#choices').children('div').css('display') != "none" ? true : false;
    $("button#create-variation").toggle(toggleThis);
}

I call the function any time I clone a input, what's wrong?

Upvotes: 0

Views: 1200

Answers (1)

Mina
Mina

Reputation: 1516

You can check how many child elements are inside another element with $(el).children().length in your case $('#choices').children().length

You can also check the current CSS value for the display or visibility property to see if the element is currently visible $('#choices').css('display')

Hope that helps

Upvotes: 4

Related Questions