JavaScript slidedown without jQuery

user_99329 0
Viewed 79880

I wish to have a similar effect to jQuery slidedown but without using jQuery or any other libary. I know it's "possible" as anything in jQuery can be done in plain JavaScript. Just harder.

I cannot use jQuery as everything has to be written in my own code without any libaries used.

Has anyone done something like this or any effects just using plain JavaScript?

javascript
12 Answers

Make it shorter:

<button onclick="slide()"></button>

<div id="box"></div>

JS: 

slide(){document.getElementById("box").classList.toggle('hide');}

#box {
  overflow: hidden;
  transition: all .5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.hide {
  height: 0px !important;
}
user_45997100

Building on Yami Odymels answer here is a version that takes top- and bottom-padding into account, less relies on values set in css beforehand and also removes inline-styles after finishing the animation which prevents problems with viewport-resizes.

const container = document.querySelector('.the-wrap')
const button = document.querySelector('.the-button')

button.addEventListener('click', function() {

    // slide down
    if(!container.classList.contains('active')) {

        // show/remove display: none;
        container.classList.add('active')

        // get current height
        const height = container.clientHeight + "px"

        // remove height to 0
        container.style.height = 0;
        container.style.paddingTop = 0;
        container.style.paddingBottom = 0;
        container.style.overflow = "hidden";

        // this triggers applying the height and padding-values; does not show up on screen
        setTimeout(() => {

            // register removing properties after end of transition
            container.addEventListener('transitionend', () => {
                container.style.height = "";
                container.style.transition = "";
                container.style.overflow = "";
            }, {once: true})

            // set transition
            container.style.transition = "height 0.5s ease, padding-top 0.5s ease, padding-bottom 0.5s ease";

            // set values to trigger transition
            container.style.height = height;
            container.style.paddingTop = "";
            container.style.paddingBottom = "";

        }, 0);

    }
    // slide up
    else {

        // explicitly set height, transitioning to auto-values is not included in spec
        container.style.height = container.clientHeight + "px";
        container.style.overflow = "hidden";
        container.style.transition = "height 0.5s ease, padding-top 0.5s ease, padding-bottom 0.5s ease";

        // again wait
        setTimeout(() => {

            // register cleanup
            container.addEventListener('transitionend', () => {
                container.classList.remove('active')
                container.style.height = "";
                container.style.transition = "";
                container.style.overflow = "";
                container.style.paddingTop = "";
                container.style.paddingBottom = "";
            }, {once: true});

            // set to visually hidden, thus triggering transition
            container.style.height = 0;
            container.style.paddingTop = 0;
            container.style.paddingBottom = 0;

        }, 0);

    }

});
*,
*:before,
*:after {
  box-sizing: border-box;
}

.the-wrap {
    outline: 2px solid crimson;
    margin-top: 50px;
    padding: 20px;
}

.the-wrap:not(.active) {
    display: none;
}
<button class="the-button">toggle</button>

<div class="the-wrap">
    <h1>Headline</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

user_2045580
Related