CODEWITHSUNDEEP
javascriptjquery
roy king
roy king

Reputation: 13

jquery display none not working

Gurus, I am using Jquery to hide or display the fields based on the field value options. Previously I used hide and show function and it was working fine, but there is white space. So I changed to use jquery display none to hide the fields. however it doesn't work, please help, thank you! Below is my code.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(
        function(){
            hideRating('initial');
        }
    );

    function hideRating(scope){
        if(scope=='initial'){
            jQuery('[id$=CallSupportBeforeOutput]').style.display = "none";
            jQuery('[id$=CallSupportBeforeQuestionLabel]').style.display = "none";
    }
}

Upvotes: 1

Views: 1829

Answers (5)

Therichpost
Therichpost

Reputation: 1815

Here is the solution:

jQuery('#CallSupportBeforeOutput').css("display", "none");
jQuery('#CallSupportBeforeQuestionLabel').css("display", "none");

Upvotes: 1

Sushant Verma
Sushant Verma

Reputation: 57

Use .css property instead of .style property as follows:-

    jQuery('[id$=CallSupportBeforeOutput]').css("display", "none");
            jQuery('[id$=CallSupportBeforeQuestionLabel]').css("display", "none");}

Upvotes: 0

Maheswaran S
Maheswaran S

Reputation: 525

Both hide() function and style.display = 'none'; are same functionality. You have to check the CSS property. May be it will overwrite.

Upvotes: 0

Krushnakant Ladani
Krushnakant Ladani

Reputation: 673

<script type="text/javascript">
        jQuery(document).ready(
            function(){
                hideRating('initial');
            }
        );

        function hideRating(scope){
            if(scope=='initial'){
                jQuery('[id$=CallSupportBeforeOutput]').css("display", "none");
                jQuery('[id$=CallSupportBeforeQuestionLabel]').css("display", "none");}
}

 </script>

can you please try this!!

Upvotes: 0

sumit chauhan
sumit chauhan

Reputation: 1300

jQuery('[id$=CallSupportBeforeOutput]') return an array you need to provide index to change the style of elements. See below snippet.

jQuery(document).ready(
        function(){
            hideRating('initial');
        }
    );

    function hideRating(scope){
        if(scope=='initial'){
            jQuery('[id$=CallSupportBeforeOutput]')[0].style.display = "none";
            jQuery('[id$=CallSupportBeforeQuestionLabel]')[0].style.display = "none";}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: red"> visible content
<div id="CallSupportBeforeOutput">main content
</div>
<div id="CallSupportBeforeQuestionLabel">second content
</div>
</div>

Also you are mixing pure javascript with jquery by using style.display. You can use .css() jquery method to change the style if you don't want to provide index of elements.

Upvotes: 0

Related Questions