CODEWITHSUNDEEP
javascriptjqueryevents
Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61401

Jquery .show does not change display property

I am generating script that is supposed to select values after page got reloaded with F5 or browser back button.

JQuery is loaded, and element is on the page, screenshot below shows me running in console $('.isEstateOver325K').show() and element remaining display:none.

enter image description here

I must be missing something obvious here.

script that is supposed to change visibility is fired by another that triggers change and click on element it would be weird if this would be the reason since it works ok for some different elements - still worth mentioning.

(function() {

$(
    "[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
    if ($(
            "[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
        ).is(':checked')) {
        $(".isEstateOver325K").show();
        $(".isEstateOver325K").addClass('quote-form--active');
    } else {
        $(".isEstateOver325K").hide();
    }
});

});
$(function() {
    $("[name='MaritalStatus'][value='Single']").trigger("click");
    $("[name='MaritalStatus'][value='Single']").trigger("change");
});

I am sure someone has experienced something similar, why doesn't it change to display:block?

Upvotes: 2

Views: 2020

Answers (4)

Fer To
Fer To

Reputation: 1517

So for your first question, to sum up . If you call

$('').show();

You're telling jQuery to select "nothing" and to show this "nothing".

If you want to select "all". Than you have to use the all-selector(http://api.jquery.com/all-selector/):

$('*').show();

A really basic example is here: http://jsbin.com/cixoxatufu/2/edit?html,js,console,output

And for the rest, I really appreciate a JSBin or something as this is just hinting to something and not really providing a solution.

Upvotes: 0

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

even this can also work

/*---for multiple css property-----*/
$('').css({
  'display':'block'
});

/*---for single css property-----*/
$('').css('display','block');

Upvotes: 0

Pratik Jagtap
Pratik Jagtap

Reputation: 146

Try to use toggle(). Toggle will toggle display:none to display:block and Vice-Versa. 

 $(
    "[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
    if ($(
            "[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
        ).is(':checked')) {
        $(".isEstateOver325K").toggle();
        $(".isEstateOver325K").addClass('quote-form--active');
    } else {
        $(".isEstateOver325K").toggle();
    }
});

});
$(function() {
    $("[name='MaritalStatus'][value='Single']").trigger("click");
    $("[name='MaritalStatus'][value='Single']").trigger("change");
});

Upvotes: 2

Dusty
Dusty

Reputation: 364

Try with : 

$('').attr('style','display:block;')

Upvotes: 3

Related Questions