Az lenne a terv, hogy az x-re kattintva az első lista utolsó sora megjelenjen, ami addig nem volt látható, de a listajel nem jelenik meg, miért?

Azért nem működik úgy ahogy szeretnéd, mert eredetileg nem inline a display típusa a <li> tag-nek, hanem list-item, tehát erre állítsd vissza!

document.getElementById('c').style.display = 'list-item';

A legjobb megoldás, ha az elrejtendő li elemeknek adsz egy olyan class-t, amiben meg van adva a display: none érték. Az x-re kattintva, elveszed ezt a class-t azoktól, amelyeknél ez ott van, és így az alap érték érvényesül, vagyis ismét list-item lesz mind.

Egyszerűbb, ha használod a jquery libraryt. Azzal könnyebb kiválasztani dom objektumokat.

[link]

Pl jqueryvel:

css:

.hidden {display: none;}

html:

<ul>

<li>A</li>

<li>B</li>

<li>C <span onClick="f()">x</span></li>

<li class="hidden">D</li>

<li class="hidden">E</li>

<li class="hidden">F</li>

<li class="hidden">G</li>

<li class="hidden">H</li>

</ul>

js:

function f() {

$("ul.hidden").removeClass("hidden");

}

Egyáltalán nem, a jquery libraryt linkelhet a google apijából, vagy saját tárhelyedről is letöltés után:

<script type="text/javascript" src=" [link]

vagy

<script type="text/javascript" src="jquery.min.js"></script>