Convert all 'display: none' to display block in HTML

Question

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) + '"';
   }

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? — mk117, Dec 21 '14 at 16:30
Maybe this helps: [Can jQuery get all CSS styles associated with an element?](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element#answer-5830517) .... Use that script to get the `display:none` style and add `.show()`to those elements if they have that style in it's attribute. — mk117, Dec 21 '14 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. — Sebastian Zartner, Dec 22 '14 at 07:13

score 2 · Answer 1 · answered Dec 21 '14 at 16:26

2

Try

$('*').filter(function(){
   return $(this).css('display') == 'none';
}).css('display', 'block')

answered Dec 21 '14 at 16:26

Musa

96,336
17
118
137

Not working for the page I am trying. Need to convert only the display:none and not all the elements – Rahul Dec 21 '14 at 16:30
@Rahul That's what doing this answer, have you tried it? If not working as expected, please provide concrete sample – A. Wolff Dec 21 '14 at 16:31
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 – A. Wolff Dec 21 '14 at 16:38
I didn't use `show` because OP wanted `display:block` – Musa Dec 21 '14 at 16:40
@Musa But i guess OP not really knows what to expect. Setting `display:block` on inline elements is a layout killer – A. Wolff Dec 21 '14 at 16:42

Biswas · Answer 2 · 2014-12-21T16:36:57.250

1

    $('body').find(':hidden').each(function(){
       $(this).show();
    });

Hope this helps. Thanks

edited Dec 21 '14 at 16:36

answered Dec 21 '14 at 16:29

Biswas

598
2
16
34

Nope.It shows a blank array since I guess its just taking for document object alone and not all the elements – Rahul Dec 21 '14 at 16:33

score -1 · Answer 3 · edited May 23 '17 at 10:31

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/

Convert all 'display: none' to display block in HTML

3 Answers3