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
<div id="clanek1" class="clanek"> <h3 onclick="zobrazSkryj('clanek1')">Nadpis skrývaného odstavce</h3> <div class="skryvany"> <p>skryvany odstavec</p> </div> </div> <div id="clanek2" class="clanek"> <h3 onclick="zobrazSkryj('clanek2')">Nadpis skrývaného odstavce</h3> <div class="skryvany"> <p>skryvany odstavec</p> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.clanek { background: #ccc; border: 1px solid blue; padding: 1em; margin: 1em; } .clanek>div { background: grey; padding: 1em; } .clanek>h3 { cursor: pointer; } .clanek.skryty>div { display: none; } .clanek.skryty>h3 { color: red; }
CSS
Autoformát
CSS reset
Až na konci
function zobrazSkryj(idecko){ var element=document.getElementById(idecko); if(element.className.indexOf('skryty') >= 0) { // je skryty element.className = element.className.replace(" skryty", ""); } else { // je zobrazeny element.className += ' skryty'; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>