why list element dont show up properly using display initial

Question

This is my code:

<html>
<head>
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.show{
   display : none;
}
</style>
<script>
    window.onload = function(){
       var clickElement = document.getElementById("wow");
        clickElement.onclick = function(){
             $(".show").css('display', 'initial');
        }
    }
</script>
</head>
<body>
 <ul>
    <li id="wow">select</li>
    <li class="show">select1</li>
    <li class="show">select2</li>
    <li class="show">select3</li>

 </ul>
</body>
</html>

when I clicked, on the select, the selection list not show up properly but instead they show up inline, why??

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

You have to change the display type to list-item rather than the initial value; Because the initial value of display property is inline. This is documented in the spec.

The initial keyword refers to the value defined by CSS, not the browser default.

Alternatively, you could use jQuery .show() method to achieve that.

For further reading:

Reset CSS display property to default value

edited May 23 '17 at 12:05

Community

1
1

answered Sep 09 '14 at 18:48

Hashem Qolami

97,268
26
150
164

score 1 · Answer 2 · answered Sep 09 '14 at 18:49

1

Use jQuery show():

$(".show").show();

answered Sep 09 '14 at 18:49

folkol

4,752
22
25

score 0 · Answer 3 · answered Sep 09 '14 at 18:49

0

You should use list-item instead of initial.

Replace this line:

$(".show").css('display', 'initial');

with:

$(".show").css('display', 'list-item');

Source: http://www.w3.org/wiki/CSS/Properties/display

answered Sep 09 '14 at 18:49

iSWORD

768
15
22

why list element dont show up properly using display initial

3 Answers3