toggle Slide

Inicio aberto

Clique para alternar

FIRST HEADER TITLE

5 de janeiro de 2016

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Inicio fechado

Clique para alternar

SECOND HEADER TITLE

6 de fevereiro de 2015

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

<button id="first-button" class="btn">Clique para alternar</button>
<div id="first-panel">
    <div class="p20">
        <h2>FIRST HEADER TITLE</h2>
        <time>5 de janeiro de 2016</time>
        <img src="https://picsum.photos/id/25/500/333" alt="picsum.photos"> 
        <p>Some text..</p>
    </div>
</div>

<button id="second-button" class="btn">Clique para alternar</button>
<div id="second-panel">
    <div class="p20">
        <h2>SECOND HEADER TITLE</h2>
        <time>6 de fevereiro de 2015</time>
        <img src="https://picsum.photos/id/28/500/333" alt="picsum.photos"> 
        <p>Some text..</p>
    </div>
</div>

<script>
document.querySelector("#first-button").addEventListener('click', event => {
    toggle.slide( document.querySelector("#first-panel") );
});

document.querySelector("#second-panel").style.display = "none"; // pode ser com atributo style no elemento
document.querySelector("#second-button").addEventListener('click', event => {
    toggle.slide( document.querySelector("#second-panel") );
});
</script>

let toggle = {
    hide: function (element, duration = 500) {
        return new Promise(function() {
            element.style.height = element.offsetHeight + "px";
            element.style.transition = "height " + duration + "ms";
            element.offsetHeight;
            element.style.overflow = "hidden";
            element.style.height = 0;
            window.setTimeout(function () {
                element.style.display = "none";
                element.style.removeProperty("height");
                element.style.removeProperty("overflow");
                element.style.removeProperty("transition");
            }, duration)
        });
    },
    show: function (element, duration = 500) {
        return new Promise(function() {
            element.style.removeProperty("display");
            let display = window.getComputedStyle(element).display;
            if(display === "none") {
                display = "block";
            }
            element.style.display = display;
            let height = element.offsetHeight;
            element.style.height = 0;
            element.offsetHeight;
            element.style.overflow = "hidden";
            element.style.transition = "height " + duration + "ms";
            element.style.height = height + "px";
            window.setTimeout(function () {
                element.style.removeProperty("height");
                element.style.removeProperty("overflow");
                element.style.removeProperty("transition");
            }, duration)
        })
    },
    slide: function (element, duration = 500) {
        if(window.getComputedStyle(element).display == "none") {
            return this.show(element, duration);
        } 
        else {
            return this.hide(element, duration);
        }
    }
};