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="otazka" onclick="toggle('1')">Nadpis</div> <div id="1" class="animatedHiding"> <div>txtnhgbhjgbhjghzghzgzh</div> </div> <div class="otazka" onclick="toggle('2')">Nadpis</div> <div id="2" class="animatedHiding"> <div>txtnhgbhjgbhjghzghzgzh</div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@import url(https://fonts.googleapis.com/css?family=Passion+One); body { background-color: rgb(236,236,236); } .otazka { width: 400px; background-color: rgb(99,202,227); font-family: 'Passion One', cursive; color: white; text-align: center; line-height: 50px; font-size: 45px; margin-top: 0.1em; } .animatedHiding { -webkit-transition: height .2s; -moz-transition: height .2s; -ms-transition: height .2s; -o-transition: height .2s; transition: height .2s; overflow: hidden; height: 0; }
CSS
Autoformát
CSS reset
Až na konci
function toggle(id) { var animatedHiding = document.getElementById(id); if (animatedHiding.clientHeight) { animatedHiding.style.height = 0; } else { var wrapper = animatedHiding.firstElementChild; animatedHiding.style.height = wrapper.clientHeight + "px"; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>