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
<details> <summary>Položka</summary> <div> <p>Obsah položky, který se objeví až po rozkliknutí.</p> </div> </details> <details> <summary>Položka</summary> <div> <p>Obsah položky, který se objeví až po rozkliknutí.</p> </div> </details>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* rozklikávací popisek */ summary { cursor: pointer; } /* rozkliknutý popisek */ details[open] > summary { font-weight: bold; } /* ikonka znázorňující rozbalení */ summary::-webkit-details-marker { color: red; } summary:focus { outline: 0; } details p { margin: .5em 1em; } details details { margin-left: 1em; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-1.25em); } 100% { opacity: 1; transform: translateY(0); } } details[open] div { -webkit-animation-name: fadeInDown; -webkit-animation-duration: 0.5s; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>