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
<input type="checkbox" class="rozbalovac" id="box1"> <div class="rozbalovaci"> <label for="box1">Nadpis 1</label> <div class="obsah"> <p>První obsah, který se objeví po kliknutí.</p> </div> </div> <input type="checkbox" class="rozbalovac" id="box2"> <div class="rozbalovaci"> <label for="box2">Nadpis 2</label> <div class="obsah"> <p>Druhý obsah, který se objeví po kliknutí.</p> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* Přepínání */ input.rozbalovac {display: none;} input[type=checkbox]:checked + .rozbalovaci .obsah {display: block} .rozbalovaci > .obsah {display: none} /* Styl přepínátka */ .rozbalovaci > label { display: block; cursor: pointer; background: #0D6AB7; color: #fff; padding: .5em } input[type=checkbox]:checked + .rozbalovaci label {background: #1081DD;} .rozbalovaci > label:before { content: "+"; background: #fff; color: #000; padding: 0 .3em; margin-right: .5em; border-radius: 3px } input[type=checkbox]:checked + .rozbalovaci label:before {content: "−"} /* Nepodstatný styl „obsahu“ */ .rozbalovaci > .obsah {background: #8ECCF0; padding: 1em}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>