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="BocniPanel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a sem ex. Nullam imperdiet lectus eu euismod finibus. Cras bibendum sit amet magna nec varius. Cras maximus erat cursus nisi tristique ornare. In dignissim venenatis aliquet. Vivamus vulputate lacus non arcu hendrerit blandit. Donec euismod, enim nec sodales fermentum, lacus purus imperdiet elit, nec rutrum tellus ligula at lacus. Quisque cursus justo et tincidunt porta. Proin non ipsum tristique nunc imperdiet congue at vitae risus. Vivamus lacinia tellus mi, efficitur efficitur nulla luctus vel. Vivamus sed augue enim.</div> <a href="#" onclick="otevrit()">Otevřít</a><br> <a href="#" onclick="zavrit()">Zavřít</a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#BocniPanel { background-color: #15D8c1; height: 150px; overflow: hidden; transition: height 0.5s ease-in; }
CSS
Autoformát
CSS reset
Až na konci
function otevrit() { document.getElementById("BocniPanel").style.height = "150px"; } function zavrit() { document.getElementById("BocniPanel").style.height = "0px"; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>