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="toggle"> <p>Úvodní text</p> <p class="toggle-content">Doplňující text</p> <strong class="toggle-header">Zobrazit celý text</strong> </div> <div class="toggle"> <p>Úvodní text</p> <p class="toggle-content">Doplňující text</p> <strong class="toggle-header">Zobrazit celý text</strong> </div> <div class="toggle"> <p>Úvodní text</p> <p class="toggle-content">Doplňující text</p> <strong class="toggle-header">Zobrazit celý text</strong> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.toggle-content { display: none; } .toggle { border: 1px solid black; margin: 1em; }
CSS
Autoformát
CSS reset
Až na konci
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || setTimeout; var previousElementSibling = function(el) { do { el = el.previousSibling; } while (el && el.nodeType !== 1); return el; }; var show = function(content) { content.style.display = "block"; /*content.style.height = ""; var height = content.offsetHeight; content.style.height = 0; content.offsetHeight; // layout trigger raf(function() { content.style.height = height + "px"; });*/ content.setAttribute("data-open", "1"); }; var hide = function(content) { //content.style.height = 0; content.style.display = "none"; content.removeAttribute("data-open"); }; var toggle = function() { var content = previousElementSibling(this); if (content.getAttribute("data-open")) { hide(content); this.innerHTML = "Zobrazit celý text"; } else { show(content); this.innerHTML = "Skrýt text"; } }; var headers = document.querySelectorAll(".toggle-header"); for (var i = 0; i < headers.length; i++) { headers[i].onclick = toggle; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>