-3

I have an HTML web page wherein I need to find out all the elements having the display:none and style them to display:block using a script, which I can write in console or using Firebug.

There is already a script present for showing all the hidden elements in form tags. I need a similar script for display:none to display:block.

   var snapHidden = document.evaluate("//input[@type='hidden']",
       document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
   for (var i = snapHidden.snapshotLength - 1; i >= 0; i--) {
       var elmHidden = snapHidden.snapshotItem(i);
       elmHidden.style.MozOutline = '1px dashed #666';
       elmHidden.type = 'text';
       elmHidden.title = 'Hidden field "' +
           (elmHidden.name || elmHidden.id) + '"';
   }
Improve this question
3
  • 1
    is the display:none added via a common css file? Or via style=display:none tags? If via style tags, do you intend to show only these times to block, or anything that's hidden? Commented Dec 21, 2014 at 16:30
  • Maybe this helps: Can jQuery get all CSS styles associated with an element? .... Use that script to get the display:none style and add .show()to those elements if they have that style in it's attribute. Commented Dec 21, 2014 at 16:37
  • The code you posted is unrelated to your question. Please edit your question and post the code you've tried so far. Commented Dec 22, 2014 at 7:13

3 Answers 3

Reset to default
2

Try

$('*').filter(function(){
   return $(this).css('display') == 'none';
}).css('display', 'block')
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Not working for the page I am trying. Need to convert only the display:none and not all the elements
@Rahul That's what doing this answer, have you tried it? If not working as expected, please provide concrete sample
One downside, what about SPAN with display: none; set? You'd have better to use jQuery .show() method i guess to hanlde inline elements. But for sure OP question doesn't make much sense imho
I didn't use show because OP wanted display:block
@Musa But i guess OP not really knows what to expect. Setting display:block on inline elements is a layout killer
1 
    $('body').find(':hidden').each(function(){
       $(this).show();
    });

Hope this helps. Thanks

Improve this answer

1 Comment

Nope.It shows a blank array since I guess its just taking for document object alone and not all the elements
-1

Here's a working solution. The first function in the javascript is taken from this stackoverflow page: jquery-check-if-element-has-a-specific-style-property

HTML:

<div id="list1">a_1</div>
<div id="list2">a_2</div>
<div id="list3" style="display:none;">a_3</div>
<div id="list4">b_1</div>
<div id="list5">b_2</div>
<div id="list6" style="display:none;">b_3</div>
<div id="list7">c_1</div>
<div id="list8" style="display:none;">c_2</div>
<div id="list9" style="display:none;">c_3</div>

JAVASCRIPT:

 (function ($) {
    $.fn.inlineStyle = function (prop) {
         var styles = this.attr("style"),
             value;
         styles && styles.split(";").forEach(function (e) {
             var style = e.split(":");
             if ($.trim(style[0]) === prop) {
                 value = style[1];           
             }                    
         });   
         return value;
    };
}(jQuery));



 $(document).ready( function() {

  $('*:hidden').each(function(){

    var display_prop = $(this).inlineStyle("display");
    if(display_prop){
    $(this).show();
    }
   });

 });

FIDDLE: http://jsfiddle/d1oae3cL/1/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.