Plynulé rozkrytí obsahu – živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

document.body.className += " js";

var raf = window.requestAnimationFrame || 
    window.mozRequestAnimationFrame  ||
    window.webkitRequestAnimationFrame  ||
    setTimeout;
    
var nextElementSibling = function(el) {
    do {
        el = el.nextSibling;
    } 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.removeAttribute("data-open");
};

var toggle = function() {
    var content = nextElementSibling(this);    
    
    if (content.getAttribute("data-open")) {
        hide(content);
    }
    else {
        show(content);
    }
};

var headers = document.querySelectorAll(".toggle-header");
for (var i = 0; i < headers.length; i++) {
    headers[i].onclick = toggle;
}

JS

Autoformát
jQuery
Umístění JS