Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<ul> <li><span onclick="zobrazSkryj1('popisek1')">popisek 1</span><span id="popisek1"> skryvany text 1</span></li> <li><span onclick="zobrazSkryj1('popisek2')">popisek 2</span><span id="popisek2"> skryvany text 2</span></li> <li><span onclick="zobrazSkryj1('popisek3')">popisek 3</span><span id="popisek3"> skryvany text 3</span></li> <li><span onclick="zobrazSkryj1('popisek4')">popisek 4</span><span id="popisek4"> skryvany text 4</span></li> <li><span onclick="zobrazSkryj1('popisek5')">popisek 5</span><span id="popisek5"> skryvany text 5</span></li> </ul> <hr> <ul> <li><span onclick="zobrazSkryj2('popisek6', true)">popisek 1</span><span id="popisek6"> skryvany text 1</span></li> <li><span onclick="zobrazSkryj2('popisek7', true)">popisek 2</span><span id="popisek7"> skryvany text 2</span></li> <li><span onclick="zobrazSkryj2('popisek8', true)">popisek 3</span><span id="popisek8"> skryvany text 3</span></li> <li><span onclick="zobrazSkryj2('popisek9', true)">popisek 4</span><span id="popisek9"> skryvany text 4</span></li> <li><span onclick="zobrazSkryj2('popisek10', true)">popisek 5</span><span id="popisek10"> skryvany text 5</span></li> </ul> <hr> <ul> <li><span onclick="zobrazSkryj3('popisek11', true)">zobraz popisek 1</span><span id="popisek11"> skryvany text 1</span></li> <li><span onclick="zobrazSkryj3('popisek11', false)">skryj popisek 1</span></li> <li><span onclick="zobrazSkryj3('popisek12', true)">zobraz popisek 2</span><span id="popisek12"> skryvany text 2</span></li> <li><span onclick="zobrazSkryj3('popisek12', false)">skryj popisek 2</span></li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
span[id] { display: none; }
CSS
Autoformát
CSS reset
Až na konci
function ZobrazSkryj(def) { def = def || 'block'; var el = null; return function(idecko, state){ if (el && el.id != idecko) { el.style = 'none'; } el = document.getElementById(idecko); if (state === undefined) { el.style.display = (el.style.display == def) ? 'none' : def; } else { el.style.display = state ? def : 'none'; } }; } var zobrazSkryj1 = ZobrazSkryj(); var zobrazSkryj2 = ZobrazSkryj(); var zobrazSkryj3 = ZobrazSkryj('inline');
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>