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 class="rozklikavaci"> <div> <label for="rozklik1-1"><h2>První nadpis</h2></label> <input type="radio" name="rozklik1" id="rozklik1-1"> <div>První obsah</div> </div> <div> <label for="rozklik1-2"><h2>Druhý nadpis</h2></label> <input type="radio" name="rozklik1" id="rozklik1-2"> <div>Druhý obsah</div> </div> <div> <label for="rozklik1-3"><h2>Třetí nadpis</h2></label> <input type="radio" name="rozklik1" id="rozklik1-3"> <div>Třetí obsah</div> </div> <div> <label for="rozklik1-4"><h2>Čtvrtý nadpis</h2></label> <input type="radio" name="rozklik1" id="rozklik1-4"> <div>Čtvrtý obsah</div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.rozklikavaci label { cursor: pointer; } .rozklikavaci input[type=radio] { display: none; } .rozklikavaci input[type=radio]+div { opacity: 0; height: 0; padding: 0; margin: 0; transition: opacity 0s; } .rozklikavaci input[type=radio]:checked+div { opacity: 1; height: auto; padding: 1em; margin-top: 1em; transition: opacity 1s; } .rozklikavaci h2 { margin: 0; } .rozklikavaci>div { padding: 1em; margin: 1em; background: #ccc; } .rozklikavaci>div>div { background: #eee; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>